/**
 * Fichier  : /ott/features/swiper/assets/css/content.css
 * Fonction : contenu des slides
 */


/* ==================================================
   CONTENT
================================================== */

#library .swiper-slide .content {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
}

#library .swiper-slide .content {
    padding: clamp(18px, 2vw, 32px);
}

#library .swiper-slide .content {
    opacity: 0;
    pointer-events: none;
    transform: translateY(14px);
}

#library .swiper-slide .content {
    transition:
        opacity .3s ease,
        transform .35s ease;
}

#library .swiper-slide .content {
    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(0,0,0,.78)
        );
}

#library .swiper-slide-active:hover .content {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}


/* ==================================================
   TAG
================================================== */

#library .swiper-slide .tag {
    display: inline-flex;
    width: fit-content;
}

#library .swiper-slide .tag {
    margin-bottom: 12px;
    padding: 6px 10px;
}

#library .swiper-slide .tag {
    background:
        linear-gradient(
            135deg,
            #8e0e00,
            #c91f16 35%,
            #e9401b 68%,
            #ff7b00
        );
    border-radius: 999px;
}

#library .swiper-slide .tag {
    font-family: 'content-font';
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
}


/* ==================================================
   TEXT
================================================== */

#library .swiper-slide h3 {
    font-family: 'bold-font';
    font-size: 1.8em;
    font-weight: 700;
    line-height: 1.05;
    color: #fff;
}

#library .swiper-slide p {
    margin-top: 8px;
}

#library .swiper-slide p {
    font-family: 'content-font';
    font-size: 1em;
    font-weight: 400;
    line-height: 1.35;
    color: rgba(255,255,255,.72);
}

#library .swiper-slide .tag,
#library .swiper-slide h3,
#library .swiper-slide p {
    opacity: 0;
    transform: translateY(10px);
}

#library .swiper-slide .tag,
#library .swiper-slide h3,
#library .swiper-slide p {
    transition:
        opacity .3s ease,
        transform .35s ease;
}

#library .swiper-slide-active:hover .tag,
#library .swiper-slide-active:hover h3,
#library .swiper-slide-active:hover p {
    opacity: 1;
    transform: translateY(0);
}

#library .swiper-slide-active:hover h3 {
    transition-delay: .04s;
}

#library .swiper-slide-active:hover p {
    transition-delay: .08s;
}