.cases-slider {
    padding-top: 120px;
    padding-bottom: 120px;
    background-color: #f8f8f8;
}

.cases-slider__container {
    display: grid;
    grid-template-columns: min(30%, 320px) 1fr;
    grid-template-rows: auto auto;
    gap: 25px;
}

.cases-slider__swiper {
    width: 100%;
    border-radius: 30px;
    grid-row: span 2;
}

.cases-slider__title {
    font-weight: 500;
    font-size: 26px;
    color: #7d7d7d;
    text-transform: none;
    margin: 0;
}

.cases-slider__controls {
    display: flex;
    align-items: center;
    gap: 20px;
    align-self: end;
}

.cases-slider__pagination {
    max-width: 160px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    position: static!important;
    margin: 0;
}

.cases-slider__pagination > .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ececec;
}

.cases-slider__pagination > .swiper-pagination-bullet-active {
   background-color: #212121;
}

.cases-slider__slide-btn {
    visibility: hidden;
    position: static;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    color: #212121;
    border: 2px solid #212121;
    border-radius: 50%;
    margin: 0;
    transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.swiper-initialized + .cases-slider__controls .cases-slider__slide-btn {
    visibility: visible;
}

.cases-slider__slide-btn:hover,
.cases-slider__slide-btn:focus-visible {
    background-color: #fed3ac;
    border-color: #fed3ac;
    color: #e86f2a;
}

.cases-slider__slide-btn .swiper-navigation-icon {
    width: 10px;
    height: 18px;
}

.cases-slide__content {
    display: flex;
    border-radius: 30px;
    background-color: #fff;
    overflow: hidden;
    height: 100%;
}

.cases-slide__content-image {
    flex-shrink: 0;
    position: relative;
    width: 100%;
    max-width: 340px;
    min-height: 620px;
}

.cases-slide__content-image::before {
    content: "";
    position: absolute;
    height: 100px;
    left: 0;
    right: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(34, 30, 51, 0.9) 100%);
}

.cases-slide__content-info {
    padding: 30px;
}

.cases-slide__image {
    height: 100%;
}

.cases-slide__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.cases-slide__btn-play {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fbfbf9;
    background-color: #e86f2a;
    transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.cases-slide__btn-play:hover,
.cases-slide__btn-play:focus-visible {
    background-color: #fed3ac;
    border-color: #fed3ac;
    color: #e86f2a;
}

.cases-slide__btn-play svg {
    margin-left: 3px;
}

.cases-slide__title {
    position: absolute;
    left: 25px;
    bottom: 25px;
    margin: 0;
    font-size: 22px;
    line-height: 100%;
    color: #fff;
}

.cases-slide__text {
    font-weight: 600;
    font-size: 20px;
    line-height: 135%;
    color: #212121;
    margin-bottom: 20px;
}

.cases-slide__comparison {
    position: relative;
    display: flex;
    margin-bottom: 25px;
}

.cases-slide__comparison::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 5px solid #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #534496;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 18 18'%3E%3Cpath stroke='%23fbfbf9' stroke-width='.75' d='M3 9h12M9.75 3.75 15 9l-5.25 5.25'/%3E%3C/svg%3E");
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.06);
}

.cases-slide__comparison-item {
    width: 50%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cases-slide__comparison-item--point-a {
    background-color: #f8f8f8;
    border-radius: 20px 0 0 20px;
    align-items: flex-start;
}

.cases-slide__comparison-item--point-b {
    background-color: rgba(254, 211, 172, 0.5);
    border-radius: 0 20px 20px 0;
    text-align: right;
    align-items: flex-end;
}

.cases-slide__comparison-item-title {
    font-weight: 600;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding-left: 24px;
    background-repeat: no-repeat;
    background-position: left center;
}

.cases-slide__comparison-item-value {
    font-weight: 600;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: -0.01em;
    color: #7d7d7d;
}

.cases-slide__comparison-item--point-a .cases-slide__comparison-item-title,
.cases-slide__comparison-item--point-a .cases-slide__comparison-item-value {
    color: #7d7d7d;
}

.cases-slide__comparison-item--point-b .cases-slide__comparison-item-title,
.cases-slide__comparison-item--point-b .cases-slide__comparison-item-value {
    color: #e86f2a;
}

.cases-slide__comparison-item--point-a .cases-slide__comparison-item-title {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none' viewBox='0 0 15 15'%3E%3Cpath stroke='%23e86f2a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.333' d='M7.015.863a.353.353 0 0 1 .634 0l1.54 3.12a1.42 1.42 0 0 0 1.063.773l3.444.504a.353.353 0 0 1 .196.603l-2.49 2.425a1.41 1.41 0 0 0-.408 1.252l.588 3.427a.354.354 0 0 1-.514.373L7.989 11.72a1.42 1.42 0 0 0-1.315 0L3.596 13.34a.353.353 0 0 1-.513-.373L3.67 9.54a1.42 1.42 0 0 0-.407-1.253L.772 5.863a.353.353 0 0 1 .196-.604l3.443-.503a1.42 1.42 0 0 0 1.065-.773z'/%3E%3C/svg%3E");
}

.cases-slide__comparison-item--point-b .cases-slide__comparison-item-title {
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='13' viewBox='0 0 14 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.3512 0.196596C6.38041 0.13757 6.42555 0.087884 6.4815 0.0531459C6.53746 0.0184078 6.60201 0 6.66787 0C6.73373 0 6.79828 0.0184078 6.85423 0.0531459C6.91019 0.087884 6.95532 0.13757 6.98453 0.196596L8.52453 3.31593C8.62598 3.52124 8.77574 3.69887 8.96095 3.83356C9.14616 3.96826 9.36128 4.056 9.58786 4.08926L13.0319 4.59326C13.0971 4.60272 13.1584 4.63024 13.2089 4.67273C13.2593 4.71521 13.2968 4.77096 13.3172 4.83367C13.3376 4.89637 13.34 4.96353 13.3243 5.02755C13.3085 5.09157 13.2751 5.1499 13.2279 5.19593L10.7372 7.62126C10.5729 7.78133 10.45 7.97892 10.3791 8.19702C10.3081 8.41511 10.2912 8.64719 10.3299 8.87326L10.9179 12.2999C10.9294 12.3652 10.9223 12.4323 10.8975 12.4937C10.8727 12.5551 10.8312 12.6083 10.7776 12.6473C10.724 12.6862 10.6605 12.7093 10.5944 12.7139C10.5284 12.7185 10.4623 12.7044 10.4039 12.6733L7.3252 11.0546C7.12234 10.9481 6.89665 10.8924 6.66753 10.8924C6.43841 10.8924 6.21272 10.9481 6.00987 11.0546L2.93187 12.6733C2.87342 12.7042 2.80746 12.7181 2.7415 12.7134C2.67554 12.7087 2.61221 12.6856 2.55873 12.6467C2.50525 12.6078 2.46375 12.5547 2.43897 12.4934C2.41419 12.4321 2.4071 12.3651 2.41853 12.2999L3.00587 8.87393C3.04466 8.64775 3.02786 8.41553 2.95689 8.19729C2.88593 7.97906 2.76294 7.78137 2.59853 7.62126L0.107866 5.1966C0.0602624 5.15062 0.0265286 5.09219 0.0105081 5.02798C-0.00551242 4.96376 -0.00317558 4.89634 0.0172523 4.83339C0.0376802 4.77044 0.0753778 4.71449 0.126051 4.67192C0.176724 4.62935 0.238335 4.60186 0.303866 4.5926L3.7472 4.08926C3.97404 4.05626 4.18946 3.96863 4.37492 3.83392C4.56039 3.69921 4.71034 3.52144 4.81187 3.31593L6.3512 0.196596Z' fill='%23E86F2A' /%3E%3C/svg%3E");
}

.cases-slide__list-title {
    display: block;
    font-weight: 600;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.cases-slide__list {
    padding: 20px;
    border-radius: 20px;
}

.cases-slide__list:not(:last-child) {
    margin-bottom: 15px;
}

.cases-slide__list--point-a {
    background-color: #fff;
}

.cases-slide__list--point-b {
    background-color: rgba(254, 211, 172, 0.5);
}

.cases-slide__list--point-a .cases-slide__list-title {
    color: #7d7d7d;
}

.cases-slide__list--point-b .cases-slide__list-title {
    color: #e86f2a;
}

.cases-slide__items {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 15px;
    list-style: disc;
}

.cases-slide__items li {
    font-weight: 400;
    font-size: 15px;
    line-height: 100%;
}

.cases-slide__list--point-a li {
    color: #7d7d7d;
}

.cases-slide__list--point-b li {
    font-weight: 500;
    color: #212121;
}

.cases-slide__list--point-b li::marker {
    color: #e86f2a;
}

@media (max-width: 1280px) {
    .cases-slider__container {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .cases-slider__swiper {
        grid-row: auto;
    }

    .cases-slider__controls {
        justify-content: space-between;
    }

    .cases-slider__slide-btn--prev {
        order: -1;
    }

    .cases-slider__pagination {
        max-width: 250px;
        justify-content: center;
    }
}

@media (max-width: 992px) {
    .cases-slider  {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .cases-slider__container {
        gap: 0;
    }

    .cases-slider__title {
        font-size: 22px;
        margin-bottom: 15px;
    }

    .cases-slider__swiper {
        border-radius: 30px 30px 0 0;
    }

    .cases-slider__controls {
        background-color: #fff;
        padding: 0 30px 30px;
        border-radius: 0 0 30px 30px;
    }

    .cases-slide__content {
        flex-direction: column;
        border-radius: 30px 30px 0 0;
    }

    .cases-slide__content-image {
        max-width: none;
        min-height: auto;
        max-height: 550px;
    }

    .cases-slide__content-image img {
        object-position: 50% 30%;
    }

    .cases-slide__btn-play {
        width: 44px;
        height: 44px;
        top: 18px;
        right: 18px;
    }

    .cases-slide__btn-play svg {
        width: 11px;
        height: 14px;
    }

    .cases-slide__content-info {
        padding: 20px;
    }

    .cases-slide__title  {
        font-size: 26px;
        left: 22px;
        bottom: 22px;
    }


}

@media (max-width: 500px) {
    .cases-slide__content-image {
        max-height: 300px;
    }

    .cases-slide__content-image img {
        object-position: 50% 15%;
    }
}