.hero-slider {
    position: relative;
    min-width: 0;
    overflow: hidden;
    min-height: 820px;
    display: grid;
}

.hero-slider__slider {
    height: 100%;
    width: 100%;
}

.hero-slider__swiper {
    height: 100%;
}

.hero-slider__slide {
    height: 100%;
}

.hero-slider__nav {
    position: absolute;
    z-index: 2;
    bottom: 16px;
    right: 16px;
}

.hero-slider__nav .hero-slider-arrows {
    pointer-events: none;
    display: grid;
    gap: 4px;
}

.hero-slider__nav .hero-slider-arrows .hero-slider-arrow {
    pointer-events: auto;
    border-radius: 24px;
    width: 70px;
    height: 64px;
    background: #fff;
    transition: background var(--animation-duration) var(--timing-func);
}

.hero-slider__nav .hero-slider-arrows .hero-slider-arrow.swiper-button-disabled {
    cursor: default;
    opacity: 0.5;
}

.hero-slider__nav .hero-slider-arrows .hero-slider-arrow svg path {
    transition: fill var(--animation-duration) var(--timing-func);
}

.hero-slider__nav .hero-slider-arrows .hero-slider-arrow_prev:not(.swiper-button-disabled):hover, .hero-slider__nav .hero-slider-arrows .hero-slider-arrow_next:not(.swiper-button-disabled):hover {
    background: #8372b2;
}

.hero-slider__nav .hero-slider-arrows .hero-slider-arrow_prev:not(.swiper-button-disabled):hover svg path, .hero-slider__nav .hero-slider-arrows .hero-slider-arrow_next:not(.swiper-button-disabled):hover svg path {
    fill: #fff;
}

.hero-slider .slide {
    position: relative;
    height: 100%;
    padding: 24px;
}

.hero-slider .slide__media {
    position: relative;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.hero-slider .slide__media video,
.hero-slider .slide__media img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}

.hero-slider .slide__content {
    place-items: end stretch;
    display: grid;
    height: 100%;
}

.hero-slider__slide .slide__title,
.hero-slider__slide .slide__text {
    transform: translate(0px, 80px);
    opacity: 0;
    transition: transform, opacity;
    transition-timing-function: ease-out;
}

.hero-slider__slide .slide__btn {
    transform: translate(0px, -30px);
    opacity: 0;
    transition: transform, opacity;
    transition-timing-function: ease-out;
}

.hero-slider__slide .slide__title {
    transition-duration: 0.9s;
    transition-delay: 0.4s;
}

.hero-slider__slide .slide__text {
    transition-duration: 0.9s;
    transition-delay: 0.8s;
}

.hero-slider__slide .slide__btn {
    transition-duration: 0.5s;
    transition-delay: 1.2s;
}

.hero-slider__slide.swiper-slide-active .slide__title,
.hero-slider__slide.swiper-slide-active .slide__text,
.hero-slider__slide.swiper-slide-active .slide__btn {
    opacity: 1;
    transform: translate(0px, 0px);
}

@media (min-width: 767.98px) {
    .rs-intro {
        -webkit-mask-image: url("../img/lt_mask.png"), url("../img/rb_mask.png"), linear-gradient(#000000 0 0);
        mask-image: url("../img/lt_mask.png"), url("../img/rb_mask.png"), linear-gradient(#000000 0 0);
        -webkit-mask-position: 0px 0px, 100% 100%;
        mask-position: 0px 0px, 100% 100%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        border-radius: 0px 28px 0px 28px;
    }
}

@media (min-width: 1023.98px) {
    .hero-slider .slide__content {
        display: none;
    }
}

@media (max-width: 1023.98px) {
    .hero-slider__nav {
        pointer-events: none;
        left: 16px;
    }

    .hero-slider__nav .hero-slider-arrows {
        grid-template-columns: auto auto;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .hero-slider__nav .hero-slider-arrows .hero-slider-arrow_prev {
        -ms-flex-order: -1;
        order: -1;
    }

    .hero-slider__nav .hero-slider-arrows .hero-slider-arrow {
        width: 56px;
        height: 86px;
        border-radius: 18px;
    }
}

@media (max-width: 767.98px) {
    .hero-slider {
        min-height: 100svh;
    }

    .hero-slider .slide {
        padding: 30px 16px;
    }

    .hero-slider .slide__btn {
        display: grid;
    }

    .rs-intro {
        border-radius: 0px 0px 15px 15px;
        overflow: hidden;
        margin-top: -53px;
    }
}

@media (max-width: 479.98px) {
    .hero-slider__nav {
        left: 8px;
        right: 8px;
    }
}