.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; padding: 20px; } .product-card { border: 1px solid #ddd; border-radius: 8px; padding: 16px; text-align: center; background-color: #fff; } .product-card img { max-width: 100%; height: auto; margin-bottom: 10px; } .product-card h3 { margin: 10px 0; font-size: 18px; } .product-card p { margin: 5px 0; color: #666; } .product-card button { padding: 8px 16px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; margin-top: 10px; } .product-card button:hover { background-color: #0056b3; } /* Stili per il form di login */ form { max-width: 400px; margin: 50px auto; padding: 20px; border: 1px solid #ddd; border-radius: 8px; background-color: #f9f9f9; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } form h2 { text-align: center; margin-bottom: 20px; color: #333; } form label { display: block; margin-bottom: 5px; font-weight: bold; color: #555; } form input[type="text"], form input[type="password"], form input[type="email"] { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } form button { width: 100%; padding: 10px; background-color: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } form button:hover { background-color: #218838; } /* Stili per la pagina prodotto */ .product-detail { max-width: 800px; margin: 20px auto; padding: 20px; border: 1px solid #ddd; border-radius: 8px; background-color: #fff; display: flex; flex-direction: column; } .product-detail img { max-width: 100%; height: auto; margin-bottom: 20px; flex-shrink: 0; } .product-detail > div { flex: 1; } @media (min-width: 768px) { .product-detail { flex-direction: row; } .product-detail img { max-width: 40%; margin-bottom: 0; margin-right: 20px; } }