/* ==========================================================================
   GALLERY — carrousel photo plein cadre (Swiper), pagination à points, voir
   assets/js/gallery-slider.js et maquette (section entre Chambres et
   Services). Pas de flèches de navigation ici (contrairement au slider
   Chambres) — juste la pagination, pour rester sobre sur une image pleine
   largeur.
   ========================================================================== */
.gallery {
    max-width: none;
    max-width: 1600px;
    /* padding: 2rem 0; */
    padding: 6rem 2rem 2rem;
}

.gallery-swiper {
    width: 100%;
    aspect-ratio: 2/2.5;
}

@media (min-width: 550px) {
    /* .gallery {
        padding: 2rem;
    } */
    .gallery-swiper {
        aspect-ratio: 1.8/2;
    }
}

@media (min-width: 768px) {
    /* .gallery {
        padding: 3rem;
    } */

    .gallery-swiper {
        aspect-ratio: 16/9;
    }

}

@media (min-width: 1100px) {
    .gallery-swiper {
        aspect-ratio: 21/9;
    }
}

/* @media (min-width: 650px) {
    .gallery {
        padding: 1rem;
    }
} */

.gallery__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery .swiper-pagination {
    bottom: 1.5rem;
}

.gallery .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: var(--color-surface);
    opacity: 0.6;
}

.gallery .swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--color-secondary);
}

/* @media (min-width: 768px) {
    .gallery-swiper {
        aspect-ratio: 21/9;
    }
} */