.content-slider {
    padding: 1.2rem;
    overflow: hidden;
    background: #fff;
    border-radius: 2rem;
}


/* =========================================================
   Заголовок всего блока
   ========================================================= */

.content-slider__header {
    padding: 4.8rem 5.6rem 3.2rem;
}

.content-slider__heading {
    margin: 0;
    font-family: "Inter", sans-serif;
    font-size: 4.8rem;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.04em;
    text-transform: uppercase;
}


/* =========================================================
   Swiper
   ========================================================= */

.content-slider__viewport {
    overflow: hidden;
    border-radius: 2rem;
}

.content-slider__item {
    height: auto;
}


/* =========================================================
   Обычная карточка
   Текст слева, изображение справа
   ========================================================= */

.content-slider__card {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);

    min-height: 40rem;
    height: 100%;

    overflow: hidden;

    background: #eff1f4;
    border-radius: 2rem;
}


/* =========================================================
   Режим "только изображение"
   ========================================================= */

.content-slider__card--image-only {
    display: block;
    min-height: 0;
}

/*
 * Высота такого слайда определяется шириной контейнера
 * и реальными пропорциями картинки.
 *
 * aspect-ratio здесь НЕ задаём жёстко — картинка сама
 * определит высоту благодаря width:100%; height:auto.
 */
.content-slider__card--image-only .content-slider__media {
    width: 100%;
    min-height: 0;
    overflow: hidden;
}

.content-slider__card--image-only .content-slider__media picture {
    display: block;
    width: 100%;
    height: auto;
}

/*
 * object-fit: contain — картинка вписывается целиком.
 * Если нужен баннер "в обрез", замените на cover.
 */
.content-slider__card--image-only .content-slider__media img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
    object-position: center;
}


/* =========================================================
   Текстовая часть
   ========================================================= */

.content-slider__content {
    display: flex;
    flex-direction: column;

    min-width: 0;

    padding: 5.6rem;
}

.content-slider__text {
    max-width: 56rem;
}


/* =========================================================
   Метка
   ========================================================= */

.content-slider__label {
    display: inline-flex;
    align-items: center;

    width: fit-content;
    min-height: 3.6rem;

    margin-bottom: 3.2rem;
    padding: 0.8rem 1.6rem;

    border-radius: 6.5rem;

    background: #fff;
    color: #0047ba;

    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.2;
}


/* =========================================================
   Главный заголовок
   ========================================================= */

.content-slider__title {
    margin: 0;

    font-family: "Inter", sans-serif;
    font-size: 4.8rem;
    font-weight: 900;
    line-height: 1.05;

    letter-spacing: -0.04em;
    text-transform: uppercase;
}


/* =========================================================
   Описание
   ========================================================= */

.content-slider__description {
    max-width: 48rem;

    margin-top: 2.4rem;

    color: #21222e;

    font-size: 1.8rem;
    line-height: 1.45;
}

.content-slider__description > :first-child {
    margin-top: 0;
}

.content-slider__description > :last-child {
    margin-bottom: 0;
}


/* =========================================================
   Кнопка
   ========================================================= */

.content-slider__footer {
    display: flex;
    align-items: flex-end;

    gap: 2.4rem;

    margin-top: auto;
    padding-top: 4rem;
}

.content-slider__button {
    width: auto;
    min-width: 18rem;
}


/* =========================================================
   Изображение обычного слайда
   ========================================================= */

.content-slider__media {
    position: relative;

    min-width: 0;
    overflow: hidden;
}

.content-slider__media picture {
    display: block;

    width: 100%;
    height: 100%;
}

/*
 * object-fit: cover — картинка заполняет блок без полей.
 * УБРАН transform: scale(1.025) — именно он резал края.
 */
.content-slider__media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    /* transform убран */
    transition: transform 0.8s ease;
}

/*
 * Мягкий "наезд" только на активном слайде.
 * Если не нужен — удалите этот блок целиком.
 */
.content-slider__item.swiper-slide-active .content-slider__media img {
    transform: scale(1.03);
}


/* =========================================================
   Блок управления
   ========================================================= */

.content-slider__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 2.4rem;

    padding: 1.2rem 0.8rem 0;
}


/* =========================================================
   Счётчик
   ========================================================= */

.content-slider__counter {
    display: flex;
    align-items: baseline;

    gap: 0.6rem;

    color: #899ab7;

    font-size: 1.5rem;
    font-weight: 500;

    white-space: nowrap;
}

.content-slider__counter .js-content-slider-current {
    color: #0047ba;

    font-size: 2.4rem;
}

.content-slider__counter-separator {
    opacity: 0.65;
}


/* =========================================================
   Прогресс
   ========================================================= */

.content-slider__progress {
    height: 0.4rem;

    margin: 1.2rem 2rem 0;

    overflow: hidden;

    background: #eff1f4;

    border-radius: 1rem;
}

.content-slider__progress-bar {
    display: block;

    width: 0;
    height: 100%;

    background: #0047ba;

    border-radius: inherit;

    transition: width 0.6s ease;
}


/* =========================================================
   Планшеты и мобильные устройства
   ========================================================= */

@media (max-width: 999.98px) {

    .content-slider {
        padding: 0.8rem;
        border-radius: 1.2rem;
    }


    /* Заголовок блока */

    .content-slider__header {
        padding: 2rem 1.2rem;
    }

    .content-slider__heading {
        font-size: 2.8rem;
    }


    /* Скругления */

    .content-slider__viewport,
    .content-slider__card {
        border-radius: 1.2rem;
    }


    /* =====================================================
       Обычный слайд
       На мобильном становится вертикальным
       ===================================================== */

    .content-slider__card {
        grid-template-columns: 1fr;

        min-height: 0;
    }

    .content-slider__content {
        padding: 2rem;
    }

    /*
     * На мобильном изображение обычного слайда
     * выводится первым и занимает свою естественную высоту.
     */
    .content-slider__media {
        order: -1;

        /* Не задаём aspect-ratio — картинка сама определит высоту */
        aspect-ratio: auto;
    }

    /* Чтобы картинка не растягивалась на всю высоту grid-ячейки */
    .content-slider__media picture,
    .content-slider__media img {
        height: auto;
    }


    /* =====================================================
       Режим "только картинка"
       ===================================================== */

    .content-slider__card--image-only {
        display: block;
        min-height: 0;
    }

    .content-slider__card--image-only .content-slider__media {
        width: 100%;
        min-height: 0;
        aspect-ratio: auto;
    }


    /* Метка */

    .content-slider__label {
        min-height: 3rem;

        margin-bottom: 1.6rem;

        padding: 0.7rem 1.2rem;

        font-size: 1rem;
    }


    /* Заголовок */

    .content-slider__title {
        font-size: 2.8rem;
    }


    /* Описание */

    .content-slider__description {
        margin-top: 1.6rem;

        font-size: 1.4rem;
    }


    /* Кнопка */

    .content-slider__footer {
        flex-wrap: wrap;

        gap: 1.6rem;

        padding-top: 2.4rem;
    }

    .content-slider__button {
        order: 2;

        width: 100%;
    }


    /* Управление */

    .content-slider__controls {
        padding: 0.8rem 0.4rem 0;
    }


    /* Счётчик */

    .content-slider__counter {
        font-size: 1.2rem;
    }

    .content-slider__counter .js-content-slider-current {
        font-size: 2rem;
    }


    /* Прогресс */

    .content-slider__progress {
        margin: 0.8rem 1.2rem 0;
    }
}


/* =========================================================
   Очень маленькие экраны
   ========================================================= */

@media (max-width: 479.98px) {

    .content-slider {
        padding: 0.6rem;
    }

    .content-slider__content {
        padding: 1.6rem;
    }

    .content-slider__title {
        font-size: 2.4rem;
    }

    .content-slider__description {
        font-size: 1.3rem;
    }
}


/* =========================================================
   Отключение анимации для пользователей,
   предпочитающих reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .content-slider__media img,
    .content-slider__progress-bar {
        transition: none;
    }

    /* На всякий случай убираем и активный зум */
    .content-slider__item.swiper-slide-active .content-slider__media img {
        transform: none;
    }
}