/* @group Example
------------------------------------ */

.carousel-related .title {
    margin-bottom: 3rem;
}

@media only screen and (min-width : 961px) {
    .carousel-related .img-box {
        height: 68rem;
    }
}

@media only screen and (min-width : 0) and (max-width : 960px) {
    .carousel-related .img-box {
        height: 35rem;
    }

    .carousel-related .content .bp-button .bp-text {
        --fs: 1.6rem
    }

    .carousel-related .content .bp-button  {
        --mobile-w: 1.3rem;
    }
}

/* @end */


/* Animations
------------------------------------ */
:where(#wrapper) .carousel-related {
    opacity: 0;
    --duration: 1s;
}

:where(#wrapper) .carousel-related.animateActive {
    animation: fade var(--duration) forwards;
    animation-delay: var(--delay, 0);
    --delay: 0.3s;
}