/* @group Example
------------------------------------ */
.carousel-latest .title {
    margin-bottom: 1rem;
}
.carousel-latest .title :is(.has-heading-1-font-size) {
    text-transform: capitalize;
}
.carousel-latest .splide__slide .img-box {
    height: 35rem;
}
.carousel-latest .splide__slide .bp-button .bp-text {
    --fs: 1.6rem;
}

@media only screen 
and (min-width : 961px) {
    .carousel-latest .title {
        margin-bottom: -5.5rem;
    }
    .carousel-latest .splide__slide .img-box::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(232, 227, 220, 0.00) 100%);
    }
    .carousel-latest .splide__slide .img-box {
        height: 68rem;
    }
}

@media only screen 
and (min-width : 0) 
and (max-width : 960px) {
    
}

/* @end */


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

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