/* ==========================================================
   GALERIA.CSS
   Swiper
========================================================== */

/* ==========================================================
   CONTENEDOR
========================================================== */

.gallery-container {

    display: flex;

    flex: 1;

    width: 100%;

    min-height: 0;

}


/* ==========================================================
   SWIPER
========================================================== */

.swiper {

    width: 100%;

    height:85vh;
    margin: 0 auto;

}

/* ==========================================================
   SWIPER
========================================================== */

.swiper{

    width:100%;

    height:calc(100dvh - var(--header-height) - 40px);

    margin:0 auto;

}

@media (max-width:1024px) and (orientation:landscape){

    .swiper{

        height:96dvh;

    }

}

@media (max-width:1024px) and (orientation:portrait){

    .swiper{

        height:70dvh;

    }

}


/* ==========================================================
   WRAPPER
========================================================== */

.swiper-wrapper {

    align-items: center;

}


/* ==========================================================
   SLIDES
========================================================== */

.swiper-slide {

    display:flex;

    justify-content:center;

    align-items:center;

    width:auto;

}

/* ==========================================================
   IMÁGENES
========================================================== */
.swiper-slide img{

    display:block;

    width:auto;

    height:auto;

    max-width:100%;

    max-height:100%;

    object-fit:contain;

    opacity:0;

    filter:blur(20px);

    transform:none;

    transition:opacity .5s, filter .5s;

}

.swiper-slide img.loaded{

    opacity:1;

    filter:none;

}


/* ==========================================================
   SCROLLBAR
========================================================== */

.swiper-scrollbar {

    width: 70%;

    height: 8px;

    margin: 20px auto 0;

    background: #d9d9d9;

    border-radius: 20px;

}

.swiper-scrollbar-drag {

    background: #222;

    border-radius: 20px;

}


/* ==========================================================
   TÍTULO DE LA COLECCIÓN
========================================================== */

.collection-title {

    font-size: 1.25rem;

    font-weight: 600;

    margin-bottom: 25px;

}


/* ==========================================================
   CURSOR
========================================================== */

.swiper-slide {

    cursor: grab;

}

.swiper-slide:active {

    cursor: grabbing;

}


/* ==========================================================
   PANTALLA COMPLETA
========================================================== */

:fullscreen {

    background: #000;

}

:-webkit-full-screen {

    background: #000;

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:1024px){

    .swiper-scrollbar{

        width:80%;

    }

}


/* ==========================================================
   MÓVIL
========================================================== */

@media (max-width:768px){

    .swiper-slide img{

        width:100%;

        height:100%;

        object-fit:contain;

    }

    .swiper-scrollbar{

        width:90%;

    }

}


/* ==========================================================
   MÓVIL HORIZONTAL
========================================================== */

@media (max-width:768px) and (orientation:landscape){

    .swiper-slide img{

        max-width:100%;

        max-height:95vh;

    }

}