.top-slider{
    .splide__slide{
        position: relative;
        .slide-image{
            height: auto;
            overflow: hidden;
            width: 100%;
            position: relative;
            @media (min-width: 1024px){
                height: 740px;
            }
            picture{
                display: block;
            }
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                aspect-ratio: auto 767/575;
                @media (min-width: 768px) {
                    height: 100%;
                    aspect-ratio: auto 1023/438;
                }
                @media (min-width: 1024px){
                    aspect-ratio: auto 1405/790;
                }
                @media(min-width: 1405px) {
                    aspect-ratio: auto 3200/1371;
                }
            }

            &:before{
                content: '';
                display: block;
                position: absolute;
                left: 0;
                z-index: 2;
                width: 100%;
                top: 0;
                bottom: -2px;
                height: auto;
                background: linear-gradient(0deg, #fff 5%, hsla(0, 0%, 100%, 0) 30%);
                @media (min-width: 1024px){
                    width: 40%;
                    position: absolute;
                    bottom: 0;
                    background: linear-gradient(90deg, rgba(0, 0, 0, .82) 48%, transparent);
                }
            }
        }
        .slide-content{
            padding: 0 34px 94px;
            width: 100%;
            @media (min-width: 1024px){
                position: absolute;
                top: 60px;
                left: 81px;
                z-index: 3;
                width: 486px;
                padding: 0;
            }
            @media (min-width: 1405px) {
                top: 80px;
                left: 154px;
            }
            h2{
                font-size: 31px;
                line-height: 1.16;
                font-weight: 500;
                color: #1c1b1b;
                margin: 0;
                @media (min-width: 768px) {
                    font-size: 40px;
                }
                @media (min-width: 1024px) {
                    font-size: 50px;
                    color: #ffffff;
                }
            }
            .slide-text{
                color: #1c1b1b;
                font-size: 19px;
                line-height: 1.26;
                font-weight: 500;
                margin-top: 1rem;
                @media (min-width: 768px) {
                    font-size: 22px;
                }
                @media (min-width: 1024px) {
                    color: #ffffff;
                }
            }
            .slide-btn{
                width: 100%;
                padding: 16px 16px 17px;
                text-align: center;
                font-size: 16px;
                line-height: 1.68;
                color: #ffffff;
                background-color: #002c5f;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: 32px;
                @media (min-width: 768px){
                    width: 308px;
                }
                @media (min-width: 1024px){
                    width: 204px;
                }
                &:hover, &:active{
                    font-weight: 500;
                    text-decoration: underline;
                }
            }
        }
    }
    .splide__arrow{
        background-color: transparent;
        border-radius: 0;
        width: 16px;
        height: 45px;
        opacity: 1;
        svg{
            display: none;
        }
        &:before, &:after{
            border-right: 3px solid #ffffff;
            content: "";
            display: block;
            height: 25px;
            position: absolute;
            transform: rotate(-135deg);
            right: 6px;
            top: 0;
            width: 0;
        }
        &:after{
            margin-top: 17px;
            transform: rotate(-45deg);
        }
        &.splide__arrow--prev{
            @media (min-width: 768px){
                left: 30px;
            }
            @media (min-width: 1405px){
                left: 60px;
            }
        }
        &.splide__arrow--next{
            @media (min-width: 768px){
                right: 30px;
            }
            @media (min-width: 1405px){
                right: 11rem
            }
            &:before, &:after{
                transform: rotate(135deg);
            }
            &:after{
                transform: rotate(45deg);
            }
        }
    }
    .splide__pagination{
        bottom: 0;
        list-style: none;
        @media (min-width: 1024px){
            bottom: 30px;
        }
        li{
            &:before{
                display: none;
            }
        }
        .splide__pagination__page{
            background-color: #fff;
            border: 1px solid #676767;
            width: 16px;
            height: 16px;
            margin: 0 10px;
            opacity: 1;
            transition: all 0.3s ease-in-out;
            @media (min-width: 1024px){
                width: 12px;
                height: 12px;
                margin: 0 5px;
            }
            &.is-active, &:hover{
                background-color: #00aad2;
                border-color: #00aad2;
                transform: none;
            }
        }
    }

}