/* @group carousel-projects
------------------------------------ */

.carousel-projects {
    color: var(--green);
    overflow: hidden;
}



.carousel-projects .bp-button {
    --_color: var(--rust);
}

.carousel-projects .splide__slide {
    overflow: hidden;
    border-radius: 1rem;
    position: relative;
}

.carousel-projects .splide__track {
    overflow: visible;
}

.carousel-projects .projects {
    gap: 10rem;
}

.carousel-projects .splide__slide .content {
    padding-top: 3rem;
}

.carousel-projects .splide__slide .content header {
    display: flex;
}

.carousel-projects.bg-green {
    background: var(--green);
    color: var(--gray);
}

.carousel-projects.bg-green .title {
    z-index: 1;
    position: relative;
}

.carousel-projects.bg-green .projects .bp-button {
    --_color: var(--gray);
}

.carousel-projects.bg-green .bttn-wrapper .bp-button {
    --_color: var(--secondary-alt-rust);
}

.carousel-projects .content {
    pointer-events: none;
}

.carousel-projects .content header {
    display: flex;
    padding-block: 7rem 2.5rem;
    gap: 0.5rem;
}

.carousel-projects .content header .bp-button {
    margin-left: auto;
}
.carousel-projects .content button,
.carousel-projects .content .bp-button,
.carousel-projects .content a {
    pointer-events: all;
}

.carousel-projects.bg-green .projects>*:first-child .splide__slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.00) 100%);
}

/* SPLIDE ARROWS */
.carousel-projects .splide__arrows {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    column-gap: 3.5rem;
    position: absolute;
    bottom: -5.6rem;
    left: 0;
}
.carousel-projects .splide__arrows .splide__arrow {
    position: static;
}
.carousel-projects .splide__arrows .splide__arrow:disabled {
    opacity: .2!important;
}
.carousel-projects .splide__arrows .splide__arrow,
.carousel-projects .splide__arrows .splide__arrow svg {
    width: 3rem;
    transform: none;
    height: 3rem;
}
.carousel-projects .col-36-22:nth-child(even) .splide__arrow:first-child,
.carousel-projects .col-36-22:nth-child(even) .splide__arrow:last-child {
    transform: scaleX(-1);
}

.carousel-projects.bg-green .splide__arrow svg path {
    fill: var(--gray);
}

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

    .carousel-projects {
        padding-block: 15rem 10rem;
    }

    .carousel-projects .title {
        margin-bottom: 2rem;
    }

    .carousel-projects.bg-green {
        padding-block: 16.1rem 15rem;
    }

    .carousel-projects.bg-green .title {
        margin-bottom: -7.5rem;
    }

    .carousel-projects .splide__slide {
        height: 72.8rem;
    }

    .carousel-projects .bttn-wrapper {
        margin-top: 8rem;
    }

}


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

    .carousel-projects {
        padding-block: 10rem 9.3rem;
    }

    .carousel-projects .splide__slide {
        width: 31.5rem !important;
        height: 45rem;
    }

    .carousel-projects .projects .bp-button .bp-text {
        font-size: 1.6rem;
    }

    .carousel-projects .projects .bp-button {
        padding: 0;
        margin-left: auto;
    }

    .carousel-projects .projects .bp-button .bp-text {
        white-space: nowrap;
    }

    .carousel-projects .bttn-wrapper {
        margin-top: 8rem;
    }

    .carousel-projects .splide__slide {
        height: 45rem;
    }

    .carousel-projects .bttn-wrapper .bp-button {
        margin-inline: auto;
    }

    .carousel-projects:not(.bg-green) .title {
        margin-bottom: 3rem;
    }

    .carousel-projects.bg-green .title {
        margin-bottom: -2.5rem;
    }

}

/* @end */


/* Animations
------------------------------------ */
:where(#wrapper) .carousel-projects :is(.title, .splide, .content, .bttn-wrapper) {
    opacity: 0;
    --duration: 1s;
}

:where(#wrapper) .carousel-projects :is(.title, .splide, .content, .bttn-wrapper).animateActive {
    animation: fade var(--duration) forwards;
    animation-delay: var(--delay, 0);
    --delay: 0.3s;
}


/* Editor
------------------------------------ */
:where(.editor-styles-wrapper) .carousel-projects .bp-button {
    pointer-events: none;
}