/**
 * Fichier  : /ott/features/swiper/assets/css/responsive.css
 * Fonction : responsive du swiper
 */


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

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

    #library .swiper-slide {
        width: var(--swiper-slide-width-tablet, 78vw);
    }

    #library .swiper-slide-prev .visual {
        transform: scale(var(--swiper-preview-scale-tablet, .92));
        transform-origin: right center;
    }

    #library .swiper-slide-next .visual {
        transform: scale(var(--swiper-preview-scale-tablet, .92));
        transform-origin: left center;
    }

    #library .swiper-slide-active .visual {
        transform: scale(1);
        transform-origin: center center;
    }

    #library .swiper-slide:hover img {
        transform: scale(1);
    }

    #library .swiper-slide a {
        aspect-ratio: var(--swiper-ratio-tablet, 4 / 5);
    }

    #library .swiper-slide .content {
        display: none;
    }

}


/* ==================================================
   MOBILE
================================================== */

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

    #library .swiper-slide {
        width: var(--swiper-slide-width-mobile, 84vw);
    }

    #library .swiper-slide-prev,
    #library .swiper-slide-next {
        opacity: .8;
    }

    #library .swiper-slide .visual {
        transform: scale(.9);
        transform-origin: center center;
    }

    #library .swiper-slide-prev .visual {
        transform: scale(var(--swiper-preview-scale-mobile, .95));
        transform-origin: right center;
        filter: blur(1.5px) brightness(.92);
    }

    #library .swiper-slide-next .visual {
        transform: scale(var(--swiper-preview-scale-mobile, .95));
        transform-origin: left center;
        filter: blur(1.5px) brightness(.92);
    }

    #library .swiper-slide-active .visual {
        transform: scale(1);
        transform-origin: center center;
        filter: blur(0) brightness(1);
    }

    #library .swiper-slide a {
        aspect-ratio: var(--swiper-ratio-mobile, 4 / 5);
        border-radius: 18px;
    }

    #library .swiper-slide .visual {
        border-radius: 18px;
    }

    #library .swiper-controls {
        display: none;
    }

}