@import url("../../flights/css/style.css");

/* =Theme customization starts here */

#showcase-of-items {
    display: flex;
    flex-wrap: wrap;
}

#showcase-of-items .post {
    width: calc(25% - 10px); /* Pour 4 colonnes */
    margin: 5px;
    min-width: 250px; /* Empêche le rétrécissement trop extrême */
}


#showcase-of-items {
    max-width: 2500px; /* Ajuste si besoin */
    margin: 0 auto;
}

@media (max-width: 768px) {
    #showcase-of-items .post {
        width: calc(50% - 10px); /* Deux éléments par ligne sur mobile */
    }
}

@media (max-width: 480px) {
    #showcase-of-items .post {
        width: 100%; /* Un élément par ligne sur les petits écrans */
    }
}


#gallery-1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centre les éléments horizontalement */
    gap: 10px; /* Espacement entre les vignettes */
    margin: 0 auto; /* Centre la galerie dans son conteneur */
    padding: 0; /* Retire tout padding possible */
}

#gallery-1 .gallery-item {
    width: calc(25% - 10px); /* 4 colonnes avec un espacement de 10px entre chaque */
    box-sizing: border-box; /* Assure que les marges ne sortent pas de la taille de la galerie */
}

/* Pour les petits écrans (par exemple tablettes) */
@media (max-width: 1200px) {
    #gallery-1 .gallery-item {
        width: calc(33.33% - 10px); /* 3 colonnes */
    }
}

/* Pour les écrans encore plus petits (par exemple mobiles) */
@media (max-width: 900px) {
    #gallery-1 .gallery-item {
        width: calc(50% - 10px); /* 2 colonnes */
    }
}

/* Pour les très petits écrans */
@media (max-width: 600px) {
    #gallery-1 .gallery-item {
        width: 100%; /* 1 colonne */
    }
}