/* Страница кейса на конструкторе блоков.

   Грузится третьим, поверх new_home.css и new_service.css. Оттуда берутся
   --section-gap, .container, кнопки и готовые блоки, которые кейс
   переиспользует как есть: .svc-faq (аккордеон), .svc-stack (интеграции),
   .svc-tools (шахматка), .facts__card (карточки с цифрами),
   .blog__posts-card (статьи в тему), .want-same-project (призыв).

   Здесь — только то, чего в теме нет: первый экран кейса, блоки конструктора
   без аналога и сбросы (ниже).

   Разметка и размеры — по макету Figma «АНИТ страницы общая копия»,
   узел 2315:6369 «Блоки для кейсов» (десктоп 1920) и 1536:7592 «Кейс Mob»
   (мобильный 360). Вёрстка v2/case.php — вспомогательный источник: её CSS
   переносить нельзя, там жёсткие width у заголовков и абзацев, которые нигде
   не сбрасываются и дают горизонтальный скролл. */

/* --- Сбросы ---------------------------------------------------------------

   new_home.css — это стили страницы, а не библиотека классов: там глобальные
   правила по тегам, рассчитанные на Главную, где H2 — заголовок секции во весь
   экран, а текста мало. На кейсе всё наоборот: H2 и H3 — заголовки внутри
   статьи, текста много, выравнивание левое. Без этого блока каждый заголовок
   конструктора стал бы 80px по центру. */

.case-page {
    /* На услуге это объявлено на .service-page. Класс услуги сюда не берём:
       он тянул бы за собой всё, что появится в new_service.css дальше. */
    --footer-gap: calc(var(--section-gap) * 8 / 5);
}

/* main и section в теме центрируют содержимое по горизонтали — для секций
   Главной это правда, для текста кейса нет. */
.case-page,
.case-page section {
    align-items: center;
}

.case-page .container {
    text-align: start;
}

/* Исключение — баннер призыва: это общий блок сайта, и в макете он центрован
   так же, как на Главной и услуге. Сброс выше рассчитан на текст статьи. */
.case-page .want-same-project .container {
    text-align: center;
}

/* В макете (: form-3, 1554:6024) баннер — сплошной градиент от края до края:
   белых «зубцов» нет ни сверху, ни снизу, дальше сразу светлый подвал. На
   кейсе баннер стоит последним блоком, и нижний зубец кладёт поперёк стыка
   полосу белого в 50 px. */
.case-page .want-same-project::before,
.case-page .want-same-project::after {
    content: none;
}

/* Текстура 1920×658 рисуется в натуральную величину от левого верхнего угла,
   а секция — 690 px. На Главной недостающие снизу 32 px закрывает тот самый
   белый зубец; без него сквозь них проступала тёмная подложка градиента —
   тёмная полоса на стыке с подвалом. */
.case-page .want-same-project__bg {
    background-position: center;
    background-size: cover;
}

/* Высоты кнопок — по макету 60px у всех пилюль. Общий .button-red даёт 59
   из-за padding. На услуге те же три строки стоят под своим классом. */
.case-page .button-red,
.case-page .button-dark,
.case-page .button_white {
    height: 60px;
    padding: 0 28px;
    font-size: 18px;
}

/* --- Первый экран ---------------------------------------------------------

   Макет: bg 1920×1080, навигация на 194 от верха, H1 на 236 (80px/110%,
   по центру, ширина 1258), строка меты на 492, обложка на 664 во всю ширину
   1920×1000 с радиусом 40. */

.case-hero {
    position: relative;
    overflow: hidden;
}

/* Фон первого экрана — та же картинка, что в исходной вёрстке кейса.
   Лежит отдельным слоем, а не фоном секции: секция тянется по контенту,
   а рисунок в макете ровно 1080 и ниже переходит в белый. */
.case-hero__bg {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;

    width: 100%;
    height: 1080px;

    background-image: url('../img/cases-bg.webp');
    background-position: top center;
    background-repeat: no-repeat;

    pointer-events: none;
}

.case-hero__container {
    position: relative;
    z-index: 1;
}

.case-hero__back {
    position: relative;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    /* Строка по макету 22px, а палец промахивается по всему, что ниже 44.
       Высоту добирает паддинг, а margin-top уменьшен ровно на него — текст
       остаётся на 194 от верха, как в макете. */
    padding: 12px 0;
    margin-top: 182px;
    align-self: center;

    font-size: 18px;
    font-weight: 600;
    line-height: 120%;
    color: #081A32;

    transition: opacity 0.2s ease-out;
}

.case-hero__back:hover {
    opacity: 0.7;
}


.case-hero__title {
    max-width: 1258px;
    /* 20 по макету минус нижний паддинг зоны нажатия у ссылки «Назад». */
    margin-top: 8px;

    font-size: 80px;
    font-weight: 600;
    line-height: 110%;
    text-align: center;
    text-wrap: balance;
}

/* Четыре пары «подпись — значение» с вертикальными разделителями между ними.
   В макете колонка 299, зазор 28, разделитель 1×60 ровно посередине зазора.
   Сетка, а не flex с распоркой: при трёх заполненных полях из четырёх колонки
   должны остаться той же ширины, а не разъехаться по всей строке. */
.case-hero__info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 299px));
    justify-content: center;
    column-gap: 28px;

    width: 100%;
    margin-top: 80px;
}

.case-hero__info-item {
    position: relative;
    text-align: center;
}

.case-hero__info-item + .case-hero__info-item::before {
    content: '';
    position: absolute;
    top: 6px;
    left: -14px;

    width: 1px;
    height: 60px;

    background: #D8DFE5;
}

.case-hero__info-label {
    font-size: 18px;
    font-weight: 400;
    line-height: 120%;
}

.case-hero__info-value {
    margin-top: 20px;

    font-size: 24px;
    font-weight: 600;
    line-height: 125%;
}

/* Обложка выходит за контейнер на всю ширину окна: в макете 1920 при
   контейнере 1280. */
.case-hero__cover {
    position: relative;
    z-index: 1;

    width: 100%;
    margin-top: 100px;
}

.case-hero__cover img {
    display: block;

    width: 100%;
    height: auto;

    border-radius: 40px;
}

/* --- Ритм блоков ----------------------------------------------------------

   В макете соседние блоки стоят с шагом 120 — это ровно --section-gap темы.
   Исключение — заголовок: он относится к следующему блоку, и 120 между ними
   оторвали бы его от собственного содержимого. */

.case-block {
    margin-top: var(--section-gap);
}

/* .container в теме — flex-колонка с align-items: center, то есть дочерний
   блок получает ширину по содержимому, а не по контейнеру. Для секций Главной
   это верно, для блоков кейса нет: там max-width задаёт предел строки, а сам
   блок должен начинаться от левого края контейнера 1280. */
.case-block > .container {
    align-items: flex-start;
}

.case-block > .container > * {
    width: 100%;
}

.case-hero + .case-block {
    margin-top: calc(var(--section-gap) * 2 / 3);
}

.case-block--heading + .case-block {
    margin-top: 32px;
}

/* Последний блок перед подвалом — тот же отступ, что на странице услуги. */
.case-page > .case-block:last-of-type {
    margin-bottom: var(--footer-gap);
}

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

   H2 48/110%, H3 24/110%, оба по левому краю, ширина строки 626 (макет
   2315:6691 и 2315:6689). Ограничение по ширине именно у заголовка: длинная
   строка в 1280 читается как баннер, а не как заголовок раздела. */

.case-block__heading {
    max-width: 626px;

    font-weight: 600;
    line-height: 110%;
    color: #081A32;
    text-align: start;
    text-wrap: balance;
}

.case-block__heading--h2 {
    font-size: 48px;
}

.case-block__heading--h3 {
    font-size: 24px;
}

/* --- Текстовый блок -------------------------------------------------------- */

.case-text {
    max-width: 953px;

    font-size: 18px;
    line-height: 120%;
    text-wrap: pretty;
}

.case-text p + p,
.case-text ul,
.case-text ol {
    margin-top: 20px;
}

/* --- Текст в 2 колонки ----------------------------------------------------

   Колонки 626 с зазором 28 (макет 2315:6684). */

.case-text-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

/* Заполнена одна колонка — она не должна растягиваться на все 1280. */
.case-text-cols--single {
    grid-template-columns: minmax(0, 626px);
}

.case-text-cols .case-text {
    max-width: none;
}

/* --- Маркированный список -------------------------------------------------

   Строки 18/120% полужирным, шаг 42 между началами строк (то есть 20 между
   ними), маркер — красная «»» в 12 от текста. Ширина блока 700. */

.case-list {
    max-width: 700px;
}

.case-list__item {
    position: relative;

    padding-left: 23px;

    font-size: 18px;
    font-weight: 600;
    line-height: 120%;
}

.case-list__item + .case-list__item {
    margin-top: 20px;
}

.case-list__item::before {
    content: '\00BB';

    position: absolute;
    left: 0;

    color: #D7171F;
}

/* --- Изображения ----------------------------------------------------------

   Пропорции держит CSS, а не исходник: редактор загрузит вертикальный кадр —
   сетка страницы всё равно останется по макету. Радиус у всех картинок 32. */

.case-image__img,
.case-figure__img,
.case-checker__img,
.case-tit__img {
    display: block;

    width: 100%;
    height: 100%;

    border-radius: 32px;

    object-fit: cover;
}

.case-image__img,
.case-tit__img {
    aspect-ratio: 16 / 9;
}

.case-figure__img,
.case-checker__img {
    aspect-ratio: 626 / 500;
}

/* Полноширинное изображение: секция без .container, картинка от края до края.
   Радиус в макете 40, но на 1920 он срезается кромкой окна — так и должно быть,
   виден он только на экранах шире макета. */

.case-image-full,
.case-image-full__img {
    display: block;

    width: 100%;
}

.case-image-full__img {
    height: 100%;

    border-radius: 40px;

    object-fit: cover;
    aspect-ratio: 1920 / 1000;
}

/* --- Изображение + текст в 2 колонки --------------------------------------

   Две колонки 626 с зазором 28, внутри колонки шаг 20. */

.case-figures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.case-figures--single {
    grid-template-columns: minmax(0, 626px);
}

.case-figure {
    display: flex;
    flex-direction: column;
    gap: 20px;

    text-align: start;
}

.case-figure__caption {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.case-figure__title,
.case-checker__title,
.case-tit__title {
    font-size: 24px;
    font-weight: 600;
    line-height: 110%;
    color: #081A32;
    text-align: start;
}

.case-figure__text,
.case-checker__body,
.case-tit__text {
    font-size: 18px;
    line-height: 120%;
    color: #081A32;
    text-align: start;
    text-wrap: pretty;
}

/* --- Шахматка -------------------------------------------------------------

   Строка: текст 517 + картинка 626, зазор 137, шаг между строками 80.
   Классы свои, а не .svc-tools__row со страницы услуги: там сетка 1fr 1fr
   с зазором 80, и переиспользование сломало бы пропорции макета кейса. */

/* Доли, а не пиксели: 517/1280 и 626/1280 от контейнера. На 1280 и уже
   контейнер сам становится меньше, и фиксированная сетка дала бы переполнение. */
.case-checker__row {
    display: grid;
    grid-template-columns: 40.4% 48.9%;
    align-items: center;
    justify-content: space-between;

    width: 100%;
}

.case-checker__row + .case-checker__row {
    margin-top: 80px;
}

/* Зеркалим порядком колонок: в разметке текст всегда первый, чтобы читалка
   шла по смыслу, а не по раскладке. */
.case-checker__row--reverse {
    grid-template-columns: 48.9% 40.4%;
}

.case-checker__row--reverse .case-checker__text {
    order: 2;
}

.case-checker__text {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.case-checker__heading {
    font-size: 48px;
    font-weight: 600;
    line-height: 110%;
    color: #081A32;
    text-align: start;
    text-wrap: balance;
}

/* --- Заголовок + изображение + текст --------------------------------------

   Шаг 60 между тремя частями, текстовая часть 953 с внутренним шагом 20. */

.case-tit {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.case-tit__caption {
    display: flex;
    flex-direction: column;
    gap: 20px;

    max-width: 953px;
}

/* --- Акцентные блоки ------------------------------------------------------

   Плашка 1280×208 с полосой-индикатором 5×148 по левому краю (макет
   2315:6649). Полоса прижата к краю вплотную — так в макете; на прямом
   участке между скруглениями она видна целиком. */

.case-accent {
    position: relative;

    padding: 30px 0;

    border-radius: 32px;

    text-align: start;
}

.case-accent + .case-accent {
    margin-top: 68px;
}

.case-accent::before {
    content: '';
    position: absolute;
    top: 30px;
    bottom: 30px;
    left: 0;

    width: 5px;

    border-radius: 5px;
}

.case-accent__body {
    display: flex;
    flex-direction: column;
    gap: 14px;

    max-width: 700px;
    margin-left: 45px;
    padding: 10px 0;
}

.case-accent__title {
    font-size: 22px;
    font-weight: 600;
    line-height: 120%;
    color: #081A32;
}

.case-accent__text {
    font-size: 18px;
    line-height: 120%;
    color: #081A32;
    text-wrap: pretty;
}

/* Пары «фон + полоса» из макета. Текст во всех трёх один и тот же тёмный —
   поэтому выбор пресета не может дать нечитаемое сочетание. */
.case-accent--green {
    background: linear-gradient(135deg, #EDF6EC 0%, #E5FEE2 100%);
}

.case-accent--green::before {
    background: #74E974;
}

.case-accent--blue {
    background: #ECF1F6;
}

.case-accent--blue::before {
    background: #6AA6E2;
}

.case-accent--yellow {
    background: #FFF6E6;
}

.case-accent--yellow::before {
    background: #EFB143;
}

/* --- Аккордеон ------------------------------------------------------------

   Пункт 1280×82 в свёрнутом виде, отступ 30, радиус 32, зазор 8 (макет
   2315:6607). Разметка та же, что у FAQ услуги, но размеры свои — там
   отступ 24/32 и радиус 24. */

.case-acc {
    display: flex;
    flex-direction: column;
    gap: 8px;

    width: 100%;
}

.case-acc__item {
    /* Вертикальный отступ живёт не здесь, а на строке-заголовке: см. ниже. */
    padding: 0 30px;

    background: #ECF1F6;
    border-radius: 32px;
}

/* Строка вопроса по макету 22 px, а пальцем не попасть во всё, что ниже 44.
   Поэтому отступ карточки перенесён на саму строку: выглядит так же — те же
   30 сверху и снизу, — но нажимается вся высота карточки, а не текст. */
.case-acc__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 30px 0;

    cursor: pointer;
    list-style: none;
}

.case-acc__summary::-webkit-details-marker {
    display: none;
}

.case-acc__question {
    font-size: 22px;
    font-weight: 600;
    line-height: 120%;
    color: #081A32;
    text-align: start;
}

/* Треугольник смотрит вниз у закрытого пункта и вверх у открытого. */
.case-acc__toggle {
    flex-shrink: 0;

    width: 0;
    height: 0;

    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    border-top: 7px solid #081A32;

    transition: transform .2s ease-out;
}

.case-acc__item[open] .case-acc__toggle {
    transform: rotate(180deg);
}

.case-acc__answer {
    max-width: 700px;
    margin-top: 16px;
    /* Нижний отступ карточки — здесь, раз у неё самой его больше нет. */
    padding-bottom: 30px;

    font-size: 18px;
    line-height: 120%;
    color: #081A32;
    text-align: start;
}

.case-acc__answer p + p {
    margin-top: 12px;
}

/* --- Интеграции -----------------------------------------------------------

   Шапка 953 (заголовок 48 + подводка 18, шаг 40), затем сетка 2×2 из карточек
   626×165 с зазором 28 (макет 2315:6517). */

.case-integr__head {
    display: flex;
    flex-direction: column;
    gap: 40px;

    max-width: 953px;
}

/* Заголовок этого блока шире общего ограничения в 626: по макету он идёт
   в одну строку над широкой подводкой. */
.case-integr__heading {
    max-width: none;
}

.case-integr__text {
    font-size: 18px;
    line-height: 120%;
    color: #081A32;
    text-align: start;
}

.case-integr__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;

    width: 100%;
    margin-top: 60px;
}

/* min-height из макета держит ряды одинаковыми: без неё карточка с описанием
   в одну строку становится заметно ниже соседней с описанием в две. */
.case-integr__card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;

    min-height: 165px;
    padding: 40px;

    background: #ECF1F6;
    border-radius: 32px;

    text-align: start;
}

.case-integr__card-title {
    margin-bottom: 14px;

    font-size: 22px;
    font-weight: 600;
    line-height: 120%;
    color: #081A32;
}

.case-integr__card-desc {
    font-size: 18px;
    line-height: 120%;
    color: #081A32;
}

.case-integr__card-icon {
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 64px;
    height: 64px;
}

.case-integr__card-icon img {
    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
}

/* --- Карточки с цифрами ---------------------------------------------------

   До четырёх карточек 299×340 в ряд, зазор 28, отступ 30 (макет 2315:6504).
   Цифра прижата к верху, пояснение — к низу. */

.case-numbers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 28px;

    width: 100%;
}

.case-numbers__card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;

    min-height: 340px;
    padding: 30px;

    background: #ECF1F6;
    border-radius: 32px;

    text-align: start;
}

.case-numbers__value {
    font-size: 48px;
    font-weight: 600;
    line-height: 120%;
    color: #0D4DA1;
}

.case-numbers__text {
    font-size: 18px;
    line-height: 120%;
    color: #081A32;
}

/* --- Цитата ---------------------------------------------------------------

   Единственный блок во всю ширину со своим фоном: подложка #ECF1F6 плюс та же
   картинка-пятна, что у цитат в старых кейсах (bg_quote). Контент 900 по
   центру, отступы 100 сверху и снизу. */

.case-block--quote {
    padding: 100px 0;

    background-color: #ECF1F6;
    background-image: url('../img/bg_quote.webp');
    background-position: center;
    background-size: cover;
}

.case-quote {
    display: flex;
    flex-direction: column;
    gap: 60px;

    max-width: 900px;
    padding: 0 24px;

    text-align: center;
}

.case-quote__text {
    font-size: 32px;
    font-weight: 400;
    line-height: 140%;
    color: #081A32;
}

.case-quote__author {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.case-quote__name {
    font-size: 24px;
    font-weight: 600;
    line-height: 120%;
}

.case-quote__position {
    font-size: 16px;
    line-height: 120%;
}

/* --- Хвост страницы -------------------------------------------------------

   «Похожие проекты» и «Статьи в тему» — не блоки конструктора, а постоянный
   хвост. Заголовок в макете отбит от карточек на 60. */

.case-block--related .case-block__heading,
.case-block--articles .case-block__heading {
    margin-bottom: 60px;
}

.case-related,
.case-articles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;

    width: 100%;
}

.case-related__card {
    display: flex;
    flex-direction: column;
    gap: 40px;

    text-align: start;
    color: #081A32;
}

/* Рамка обложки рисуется всегда, даже без картинки: иначе подписи соседних
   карточек встанут на разной высоте. */
.case-related__media {
    overflow: hidden;

    border-radius: 32px;
    background-color: #ECF1F6;

    aspect-ratio: 408 / 326;
}

.case-related__img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    /* Те же параметры зума, что у карточки кейса на Главной. */
    transition: transform 0.4s ease;
}

@media (hover: hover) {
    .case-related__card:hover .case-related__img {
        transform: scale(1.1);
    }
}

.case-related__title {
    font-size: 24px;
    font-weight: 600;
    line-height: 110%;
}

/* --- Адаптив --------------------------------------------------------------

   Точки — темовые (960 / 720 / 390), а не вёрсточные (1280 / 1024 / 768):
   блоки, которые кейс переиспользует, ломаются именно на них. Раскладка
   мобильного — по фрейму «Кейс Mob» (1536:7592, ширина 360). */

@media screen and (max-width: 1280px) {
    .case-hero__cover img,
    .case-image-full__img {
        border-radius: 32px;
    }
}

@media screen and (max-width: 960px) {
    .case-hero__back {
        margin-top: 128px;
    }

    .case-hero__title {
        font-size: 48px;
    }

    .case-hero__info {
        margin-top: 48px;
    }

    .case-hero__cover {
        margin-top: 60px;
    }
}

@media screen and (max-width: 720px) {
    .case-hero__title {
        font-size: 32px;
    }

    /* Разделители между колонками рисовались вертикальной чертой слева — в
       одну колонку она встала бы поперёк текста. */
    .case-hero__info {
        grid-template-columns: 1fr;
        row-gap: 24px;
    }

    .case-hero__info-item + .case-hero__info-item::before {
        display: none;
    }

    .case-hero__info-value {
        margin-top: 8px;
        font-size: 20px;
    }

    .case-hero__cover img {
        border-radius: 24px;
    }

    /* Первый экран на мобильном ниже 1080 — фон тянем по секции, иначе
       рисуется и обрезается лишняя треть картинки. */
    .case-hero__bg {
        height: 100%;
        background-size: cover;
    }

    .case-text {
        font-size: 16px;
    }
}

@media screen and (max-width: 960px) {
    .case-block__heading--h2,
    .case-checker__heading {
        font-size: 36px;
    }

    .case-text-cols {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* Ниже 960 зигзаг нечитаем: колонки становятся одна под другой, картинка
       всегда после текста — порядок чтения важнее раскладки. */
    .case-figures,
    .case-figures--single,
    .case-checker__row,
    .case-checker__row--reverse {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .case-checker__row--reverse .case-checker__text {
        order: 0;
    }

    .case-checker__row + .case-checker__row {
        margin-top: 56px;
    }

    .case-checker__text {
        gap: 24px;
    }

    .case-tit {
        gap: 32px;
    }

    .case-image__img,
    .case-figure__img,
    .case-checker__img,
    .case-tit__img,
    .case-image-full__img {
        border-radius: 24px;
    }

    /* Карточки в один ряд не влезают: 626 при контейнере меньше 960 — это
       уже почти вся ширина. */
    .case-integr__grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 40px;
    }

    .case-integr__head {
        gap: 24px;
    }

    /* Четыре карточки по 299 требуют 1280; ниже — две в ряд. */
    .case-numbers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .case-numbers__card {
        min-height: 260px;
        gap: 24px;
    }

    .case-numbers__value {
        font-size: 36px;
    }

    .case-accent + .case-accent {
        margin-top: 40px;
    }

    .case-block--quote {
        padding: 80px 0;
    }

    .case-quote {
        gap: 40px;
    }

    .case-quote__text {
        font-size: 24px;
    }

    /* Три карточки в ряд при контейнере меньше 960 — это уже 290 на карточку,
       подпись кейса ломается на четыре строки. */
    .case-related,
    .case-articles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .case-related__media {
        border-radius: 24px;
    }

    .case-block--related .case-block__heading,
    .case-block--articles .case-block__heading {
        margin-bottom: 40px;
    }
}

@media screen and (max-width: 720px) {
    .case-related,
    .case-articles {
        grid-template-columns: minmax(0, 1fr);
    }

    .case-related__card {
        gap: 24px;
    }

    .case-related__title {
        font-size: 20px;
    }

    .case-block__heading--h2,
    .case-checker__heading {
        font-size: 28px;
    }

    .case-block__heading--h3,
    .case-figure__title,
    .case-checker__title,
    .case-tit__title {
        font-size: 20px;
    }

    .case-figure__text,
    .case-checker__body,
    .case-tit__text,
    .case-accent__text,
    .case-acc__answer,
    .case-integr__text,
    .case-integr__card-desc,
    .case-numbers__text {
        font-size: 16px;
    }

    .case-accent__title,
    .case-acc__question,
    .case-integr__card-title {
        font-size: 18px;
    }

    /* Полоса-индикатор ближе к тексту: 45 съедали бы треть узкой строки. */
    .case-accent__body {
        margin-left: 24px;
    }

    .case-acc__item {
        padding: 0 20px;
        border-radius: 24px;
    }

    .case-acc__summary {
        padding: 20px 0;
    }

    .case-acc__answer {
        padding-bottom: 20px;
    }

    .case-integr__card {
        min-height: 0;
        padding: 24px;
        border-radius: 24px;
    }

    .case-numbers {
        grid-template-columns: 1fr;
    }

    .case-numbers__card {
        min-height: 0;
        border-radius: 24px;
    }

    .case-list__item {
        font-size: 16px;
    }

    .case-block--quote {
        padding: 60px 0;
    }

    .case-quote__text {
        font-size: 20px;
    }

    .case-quote__name {
        font-size: 20px;
    }
}