Les @media queries (consultes multimèdia)

Hem arribat a la mare dels ous 🥚—el punt on el disseny es torna intel·ligent i s’adapta a cada dispositiu com si fos fet a mida. Les @media queries són el motor del disseny responsiu, i aquí tenim una explicació clara i estructurada de tot el que fan en el projecte:

📱 Explicació de les `@media queries` del projecte

🟦 Pantalles de tablet (≤ 1024px)

@media screen and (max-width: 1024px) { les etiquetes que ja em definit abans... }

Contenidor .container: s’amplia al 95% per aprofitar millor l’espai.

Títol h1: lleugerament més petit per adaptar-se a pantalles mitjanes.
Layout .content: passa de fila a columna, col·locant el main i l’aside un sota l’altre.
Galeria .gallery: redueix a dues columnes en lloc de tres.
Característiques .features: menys espai entre targetes (gap: 15px).
Cada .feature: ocupa 50% de l’amplada, mostrant dues per fila.

🟨 Tablet petita / mòbil gran (≤ 768px)

@media screen and (max-width: 768px) { ... }

Capçalera header: redueix el padding vertical per guanyar espai.

Títol h1: encara més petit per adaptar-se a pantalles compactes.
Contingut main i aside: redueixen el padding intern.
Galeria .gallery: manté dues columnes però amb menys espai (gap: 10px).
Característiques .feature: ara ocupen 100% de l’amplada, una per fila.
Peu de pàgina .footer-content: redueix el gap entre columnes.

🟥 Mòbil (≤ 480px)

@media screen and (max-width: 480px) { ... }

Contenidor .container: ocupa el 100% de l’amplada amb menys padding.

Títol h1: es redueix a 1.5rem per no saturar la pantalla.
Galeria .gallery: es mostra en una sola columna, ideal per scroll vertical.
Característiques .feature:
- Canvien a disposició vertical (flex-direction: column).
- El text es centra.
- Les icones tenen espai inferior (margin-bottom: 10px).
Peu de pàgina .footer-column: cada columna ocupa tota la fila.
Xarxes socials .social-links: es centren horitzontalment.

🧠 Què aconsegueixes amb tot això?

Adaptabilitat total: des d’un escriptori gran fins a un mòbil petit.
Millor experiència d’usuari: tot es veu bé, s’entén i és fàcil de navegar.
Disseny fluid i elegant: sense trencaments ni desbordaments visuals.

📱 Tot el codi sencer de @media amb totes les característiques de les etiquetes.

/* MEDIA QUERIES */
        
        /* Tablet: màxim 1024px d'amplada */
        @media screen and (max-width: 1024px) { /* Ajustos per a pantalles de tablet */
            .container {   /* Ajusta l'amplada del contenidor */
                width: 95%; /* Amplada del 95% de la finestra */
            }
            
            h1 { /* Ajusta la mida del títol principal */
                font-size: 2.2rem; /* Mida de font lleugerament més petita */
            }
            
            .content { /* Ajusta el layout del contingut principal i la barra lateral */
                flex-direction: column; /* Columna en lloc de fila */
            }
            
            .gallery { /* Ajusta la graella de la galeria */
                grid-template-columns: repeat(2, 1fr); /* Dues columnes en lloc de tres */
            }
            
            .features { /* Ajusta el layout de les característiques amb icones */
                gap: 15px; /* Redueix l'espai entre les característiques */
            }
            
            .feature { /* Ajusta la mida de cada característica */
                flex: 1 1 calc(50% - 15px); /* Dues característiques per fila */
            }
        }
        
        /* Tablet petita / mòbil gran: màxim 768px d'amplada */
        @media screen and (max-width: 768px) { /* Ajustos per a pantalles de tablet petita i mòbil gran */
            header { /* Ajusta la capçalera */
                padding: 20px 0; /* Redueix l'espaiat vertical */
            }
            
            h1 {
                font-size: 1.8rem; /* Mida de font més petita */
            }
            
            main, aside { /* Ajusta el padding del contingut principal i la barra lateral */
                padding: 15px; /* Redueix l'espaiat intern */
            }
            
            .gallery { /* Ajusta la graella de la galeria */
                grid-template-columns: repeat(2, 1fr); /* Dues columnes */
                gap: 10px;  
            }
            
            .feature { /* Ajusta la mida de cada característica */
                flex: 1 1 100%; /* Una característica per fila */
            }
            
            .footer-content { /* Ajusta el layout del peu de pàgina */
                gap: 20px; /* Redueix l'espai entre les columnes */
            }
        }
        
        /* Mòbil: màxim 480px d'amplada */
        @media screen and (max-width: 480px) { /* Ajustos per a pantalles de mòbil */
            .container { /* Ajusta l'amplada del contenidor */
                width: 100%; /* Amplada completa de la finestra */
                padding: 10px; /* Redueix l'espaiat intern */
            }
            
            h1 { /* Ajusta la mida del títol principal */
                font-size: 1.5rem; /* Mida de font més petita */
            }
            
            .gallery { /* Ajusta la graella de la galeria */
                grid-template-columns: 1fr; /* Una columna */
            }
            
            .feature { /* Ajusta la disposició de cada característica */
                flex-direction: column; /* Columna en lloc de fila */
                text-align: center; /* Centra el text */
            }
            
            .feature i { /* Ajusta la mida de les icones */
                margin-bottom: 10px; /* Espai sota la icona */
            }
            .footer-column { /* Ajusta la mida de cada columna del peu de pàgina */
                flex: 1 1 100%; /* Una columna per fila */
            }
            
            .social-links { /* Centra els enllaços socials */
                justify-content: center; /* Centra horitzontalment */
            }
        }

📱 Explicació de les @media queries del projecte