.story-carousel {
    margin: 65px 0;
    position: relative;

    @media (min-width: $break-large) {
        padding: 0 80px;
    }   

    &__header {
        margin: 0 14px 22px;
        padding: 20px;
        border: 2px solid $color-green-dark;
        background-color: $color-white;
        border-radius: 8px;
        position: relative;

        h2 {
            @extend h3;
            margin: 0 0 16px;
            color: $color-green-dark;
        }

        &:before {
            content: '';
            position: absolute;
            width: 10px;
            height: 10px;       
            top: 22px;
            left: -8px;
            border: 2px solid $color-green-dark;
            border-radius: 50%;
            background-color: $color-white;
            z-index: 1;
            opacity: 0;
            transition: .3s ease .6s;

            @media (min-width: $break-medium) {
                width: 15px;
                height: 15px;
                top: 25px;
                left: 18px;
            }

            @media (min-width: $break-large) {
                width: 18px;
                height: 18px;
                top: 79px;
                left: 18px;
                border: 3px solid $color-green-dark;
            }
        }

        &:after {
            content: '';
            position: absolute;
            left: -2px;
            top: 16px;
            width: 4px;
            height: 27px;
            background-color: $color-white;

            @media (min-width: $break-medium) {
                height: 38px;
                width: 5px;
            }
            
            @media (min-width: $break-large) {
                left: -3px;
                top: 72px;
            }
        }

        @media (min-width: $break-medium) {
            padding: 32px 64px;
            margin: 0 30px 27px;
        }

        @media (min-width: $break-large) {
            padding: 64px;
            margin: 0 auto 32px;
            border: 3px solid $color-green-dark;
            max-width: 1460px;

        }
    }

    .decorative-lines-left {
        position: absolute;
        top: 27px;
        left: -16px;
        height: 71%;
        width: 2px;
        transform-origin: bottom;
        background-color: $color-green-dark;
        transform: scaleY(0);
        transition: all .3s ease;

        @media (min-width: $break-medium) {
            left: -32px;
            height: 63%;
            z-index: 1;
            top: 34px;
        }

        @media (min-width: $break-large) {
            left: -90px;
            height: 62%;
            top: 89px;
            width: 3px;
        }

        &:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 2px;
            width: 16px;
            transform-origin: left;
            background-color: $color-green-dark;
            transform: scaleX(0);
            transition: all .3s ease .3s;

            @media (min-width: $break-medium) {
                width: 52px;
            }

            @media (min-width: $break-large) {
                width: 110px;
                height: 3px;
            }
        }
    }

    .decorative-lines-right {
        position: absolute;
        top: 35%;
        right: -16px;
        height: 2px;
        width: 16px;
        transform-origin: left;
        background-color: $color-green-dark;
        transform: scaleX(0);
        transition: all .3s ease .6s;

        @media (min-width: $break-medium) {
            right: -30px;
            width: 30px;
        }

        @media (min-width: $break-large) {
            right: -90px;
            width: 90px;
            height: 3px;
        }

        &:after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            height: 150px;
            width: 2px;
            transform-origin: top;
            background-color: $color-green-dark;
            transform: scaleX(0);
            transition: all .3s ease .9s;
            
            @media (min-width: $break-medium) {
                right: 0;
                height: calc(50% + 100px);
            }

            @media (min-width: $break-large) {
                right: 0;
                height: calc(50% + 136px);
                width: 3px;
            }
        }
    }

    &.js-active {
        .decorative-lines-left {
            transform: scaleY(1);
            &:after {
                transform: scaleX(1);
            }
        }
        .story-carousel__header {
            &:before {
                opacity: 1;
            }
        }
        .decorative-lines-right {
            transform: scaleX(1);
            &:after {
                transform: scaleX(1);
            }
        }
    }

    &__subtile {
        color: $color-green-dark;
        @include fontsize(16px);
        line-height: 1.4;
        font-weight: 600;

        @media (min-width: $break-medium) {
            @include fontsize(18px);
        }

        @media (min-width: $break-large) {
            @include fontsize(24px);
            line-height: 1.3;
        }
    }

    &__holder {
        position: relative;
        margin: -80px -16px 0;
        padding: 90px 0 70px;
        &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100%;
            background-color: $color-green-dark;
            background-image: url("/assets/img/banner-image.jpg");
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            z-index: -1;

            @media (min-width: $break-medium) {
                left: -34px;
            }

            @media (min-width: $break-large) {
                left: -64px;
               
            }
        }

        @media (min-width: $break-medium) {
            padding-bottom: 90px;
        }

        @media (min-width: $break-large) {
            padding: 90px 16px 90px;
            margin: -80px -96px 0;
        }
    }

    &__wrapper {
        position: relative;
        z-index: 4;

        .slick-list {
            overflow: visible;
            margin: 0 -16px;
            padding: 0 16px;
            z-index: 10;
        }

        @media (min-width: $break-large) {
            max-width: 1640px;
            margin: 0 auto;
        }
    }

    .slick-slide {
        opacity: 0;
        transition: opacity .3s ease;
        &.slick-active {
            opacity: 1;
            transition: opacity .3s ease;
        }
    }

    &__item {
        padding: 0 16px;

        @media (min-width: $break-medium) {
            display: flex !important;
            gap: 58px;
            padding: 0;
            justify-content: space-between;
        }
    }

    &__content {    
        color: $color-white;
        position: relative;
        opacity: 0;
        left: -25%;
        transition: opacity 300ms, left 0ms 300ms;

        @media (min-width: $break-medium) {
            padding-bottom: 30px;
        }

        .cite__wrap {
            margin-bottom: 12px;
            @include fontsize(16px);
            line-height: 1.5;

            @media (min-width: $break-medium) {
                margin-bottom: 16px;
                line-height: 1.6;
            }
        }

        .name {
            font-weight: 700;
            margin-right: 20px;
            position: relative;
            &:after {
                content: '';
                position: absolute;
                right: -11px;
                bottom: 0;
                height: 20px;
                width: 2px;
                background-color: $color-white;
            }
        }

        @media (min-width: $break-medium) {
            width: 65%;
        }
    }

    &__quote {
        @include fontsize(16px);
        font-weight: 600;
        line-height: 1.4;
        margin-bottom: 31px;
    }

    &__image {
        max-width: 55%;
        position: relative;
        aspect-ratio: 157/157;
        border: 2px solid $color-white;
        background-color: $color-green-dark;

        @media (min-width: $break-medium) {
            position: static;
            border: 4px solid $color-white;
        }
        img {
            width: 100%;
            aspect-ratio: 157/157;
            object-fit: cover;
            opacity: 0;
            transition: opacity 300ms;
        }

        &:before {
            content: '';
            position: absolute;
            left: calc(50% - 6px);
            bottom: -50px;
            height: 10px;
            width: 10px;
            background-color: $color-green-dark;
            border: 2px solid $color-white;
            border-radius: 50%;
            z-index: 1;

            @media (min-width: $break-medium) {
                border: 3px solid $color-white;
                bottom: -108px;
                right: 97px;            
                left: auto;
                height: 14px;
                width: 14px;
    
            }
        }

        &:after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: -50px;
            height: 50px;
            width: 2px;
            background-color: $color-white;

            @media (min-width: $break-medium) {
                bottom: -100px;
                right: 106px;
                height: auto;
                left: auto;
                top: 0;
                width: 4px;
                z-index: -1;
            }
        }

        @media (min-width: $break-medium) {
            width: 35%;
            height: fit-content;
            margin-bottom: 30px;
            max-width: 222px;
        }
    }

    &__cta {
        position: absolute;
        bottom: -125px;
        z-index: 2;
        left: -25%;
        opacity: 0;
        max-width: 100%;
        transition: opacity 300ms, left 0ms 300ms;

        a {
            @include fontsize(14px);
            font-weight: 600;
            color: $color-green-dark;
            background-color: $color-green-light;
            border-radius: 8px;
            padding: 12px 35px 11px 16px;
            transition: all .3s ease;
            display: block;
            &:before {
                display: none;
            }
            &:after {
                content: '';
                width: 14px;
                height: 10px;
                position: absolute;
                top: calc(50% - 6px);
                right: 12px;
                background-image: url("data:image/svg+xml,%3Csvg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.56369 0L14 5.02381L9.56369 10H7.55732L11.1911 5.90476H0V4.11905H11.1911L7.55732 0H9.56369Z' fill='#{str-replace(#{$color-green-dark}, '#', '%23')}'/%3E%3C/svg%3E");
            }

            &:focus {
                @include focus-light();
            }

            &:hover {
                background-color: $color-white;
            }
        }

        @media (min-width: $break-medium) {
            bottom: -35px;

            a {
                @include fontsize(18px);
                line-height: 1.3;
                &:after {
                    width: 19px;
                    height: 12px;
                    top: calc(50% - 7px);
                    right: 8px;
                    background-size: contain;
                    background-repeat: no-repeat;
                }
            }
        }
    }

    &__buttons {
        bottom: 0;
        width: 100%;
        height: 50px;
        right: 26px;
        display: flex;
        justify-content: space-between;

        .slick-arrow {
            position: relative;
            overflow: visible;
        }

        .prevArrow {
            position: absolute;
            right: 90px;
            top: -15px;

            & + span.decorative-lines {
                &:before {
                    content: '';
                    position: absolute;
                    left: 0;
                    bottom: 34px;
                    width: calc(55% / 2);
                    height: 2px;
                    background-color: rgba($color-white, 0.5);

                    @media (min-width: $break-medium) {
                        right: 117px;
                        bottom: -24px;
                        left: unset;
                        width: calc(100% - 370px);
                        height: 4px;
                        border-radius: 8px 0 0 8px;
                    }
                }

                &:after {
                    content: '';
                    position: absolute;
                    bottom: 34px;
                    width: calc(55% / 2);
                    right: calc(100% - 27.5%);
                    height: 2px;
                    background-color: $color-white;
                    z-index: 1;
                    transition: all 400ms;

                    @media (min-width: $break-medium) {
                        right: 116px;
                        bottom: -24px;
                        left: unset;
                        width: calc(100% - 370px);
                        height: 4px;
                        border-radius: 8px 0 0 8px;
                    }
                }
            }

            &.slick-disabled {
                & + span.decorative-lines:after {
                    width: 0;
        
                }
            }

            @media (min-width: $break-medium) {
                right: 145px;
                top: 23px;
            }
        }

        .nextArrow {
            position: absolute;
            right: 42px;
            top: -15px;

            & + span.decorative-lines {
                &:before {
                    content: '';
                    position: absolute;
                    right: calc(120px + 30px);
                    left:calc(27.5% + 15px);
                    bottom: 34px;
                    width: calc(65% - 20px - 150px);
                    height: 2px;
                    background-color: rgba($color-white, 0.5);

                    @media (min-width: $break-medium) {
                        right: -60px;
                        left: unset;
                        bottom: -24px;
                        width: 160px;
                        height: 4px;
                    }

                    @media (min-width: $break-large) {
                        right: -80px;
                        bottom: -24px;
                        width: 177px;
                    }
                }

                &:after {
                    content: '';
                    position: absolute;
                    right: calc(120px + 30px);
                    left: calc(27.5% + 15px);
                    bottom: 34px;
                    width: calc(65% - 20px - 150px);
                    height: 2px;
                    background-color: $color-white;
                    transition: all 400ms;

                    @media (min-width: $break-medium) {
                        right: -60px;
                        left: unset;
                        bottom: -24px;
                        width: 160px;
                        height: 4px;
                    }

                    @media (min-width: $break-large) {
                        right: -80px;
                        bottom: -24px;
                        width: 177px;
                    }
                }
            }

            &.slick-disabled {
                & + span.decorative-lines:after {
                    width: 0;
        
                }
            }

            @media (min-width: $break-medium) {
                right: 25px;
                top: 23px;
            }
        }
    }

    .btn-wrap {
        position: relative;
        width: 100%;
        height: 75px;
        z-index: 1000;
        span.button-text {
            position: absolute;
            bottom: 25px;
            right: 42px;
            font-family: $font-handwriting;
            font-weight: 400;
            @include fontsize(18px);
            line-height: .9;
            color: $color-white;

            &:before {
                position: absolute;
                width: 100%;
                height: 2px;
                border-radius: 8px;
                right: 0;
                bottom: 0;
            }

            @media (min-width: $break-medium) {
                @include fontsize(28px);
                line-height: .9;
                right: unset;
                left: 0;
                top: 50px;
                margin-top: 40px;
            }

            @media (min-width: $break-large) {
                @include fontsize(36px);
            }
        }

        @media (min-width: $break-large) {
            max-width: 1640px;
            margin: 0 auto;
        }
    }

    .nextSlide {
        .story-carousel__content,
        .story-carousel__cta {
            left: 25%;
        }
    }

    .slick-current {
        .story-carousel__content {
            opacity: 1;
            left: 0;
            transition: all 300ms 300ms;
        }

        .story-carousel__image img {
            opacity: 1;
            transition: all 300ms 300ms;
        }

        .story-carousel__cta {
            opacity: 1;
            left: 15px;
            transition: all 300ms 300ms;
        }
    }

    .slick-track {
        display: flex;

        .slick-slide {
            height: auto;
        }
    }
}