/* @group Carousel latest
------------------------------------ */
.carousel-latest {
    overflow: hidden;
}

/* SPLIDE */
.carousel-latest .splide {
    margin: 3rem 0 0;
}
.carousel-latest .splide__track {
    overflow: visible;
}
.carousel-latest .splide__slide {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: 2.5rem;
    border-radius: 1rem;
    background-color: var(--green);
    padding: 7.5rem 3.5rem;
}
.carousel-latest .splide__slide :is(h2, p, .bp-button)  {
    color: var(--gray, #E8E3DC);
    --_color: var(--gray, #E8E3DC);
}
.carousel-latest .splide__slide .bp-icon i {
    --desktop-w: 1.2rem;
}
/* BTTN VIEW MORE */
.carousel-latest .bttn-wrapper {
    padding-top: 9rem;
}
.carousel-latest .bttn-wrapper .bp-button {
    color: var(--rust);
}
/* SPLIDE ARROWS */
.carousel-latest .splide__arrows {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    column-gap: 3.5rem;
    position: absolute;
    bottom: -5.6rem;
    right: 0;
}
.carousel-latest .splide__arrows .splide__arrow {
    position: static;
}
.carousel-latest .splide__arrows .splide__arrow:disabled {
    opacity: .2!important;
}
.carousel-latest .splide__arrows .splide__arrow,
.carousel-latest .splide__arrows .splide__arrow svg {
    width: 3rem;
    transform: none;
    height: 3rem;
}

@media only screen 
and (min-width : 961px) {

    /* SPLIDE */
    .carousel-latest .splide {
        margin: 5rem 0 0;
    }
    .carousel-latest .splide__slide {
        min-height: 46.7rem;
        padding: 13rem 7rem;
    }
    /* BTTN VIEW MORE */
    .carousel-latest .bttn-wrapper {
        padding-top: 6rem;
    }

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

    /* BTTN VIEW MORE */
    .carousel-latest .content .bp-button .bp-text {
        --fs: 1.6rem
    }
    .carousel-latest .content .bp-button  {
        --mobile-w: 1.3rem;
    }

}

/* @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;
}