/* Страница кейса: карточки «О проекте» и «Задача».
   По референсу Руслана: тёмная карточка, внутри две колонки — слева
   короткий заголовок, справа текст, который начинается ровно
   с середины карточки. Ширина — та же колонка, что у снимка выше. */

/* Карточки стоят по той же колонке, что снимок выше, — чуть шире
   заголовка и выступают за его рамки. */
.case-facts {
  display: grid;
  gap: var(--case-fact-gap);
  /* Колонка плюс поля страницы по бокам: на узком экране, где колонка
     шире окна, поля остаются на месте, а карточки сжимаются. */
  width: min(calc(var(--case-media) + var(--gutter) * 2), 100%);
  margin-inline: auto;
  padding: clamp(1.5rem, 3.8vw, 3.5rem) var(--gutter) 0;
}

/* Карточка. Заливка та же, что у карточек-правил на портфолио, —
   тёмных поверхностей на сайте держим одну.
   Высоту задаёт текст: колонки разной длины, распорок не ставим. */
.case-fact {
  display: grid;
  /* Колонки ровно пополам, без зазора: в референсе текст начинается
     точно с середины карточки. */
  grid-template-columns: 1fr 1fr;
  padding: var(--case-fact-padding);
  border-radius: var(--case-card-radius);
  background-color: var(--color-surface);
}

/* Заголовок — теми же величинами, что заголовок карточки проекта
   на портфолио. */
.case-fact__title {
  margin: 0;
  font-size: var(--project-title-size);
  font-weight: 700;
  line-height: 1.15;
}

/* Текст кейса — свой кегль страницы, на 30% крупнее общесайтового
   мелкого. Тем же набран рассказ ниже: два блока читаются как один
   текст. */
.case-fact__text {
  margin: 0;
  font-size: var(--case-text-size);
  font-weight: 500;
  line-height: 1.45;
}

@media (max-width: 767px) {
  /* На телефоне колонка снимается — карточки во всю ширину экрана. */
  .case-facts {
    width: 100%;
  }

  /* И колонки внутри карточки в строку не помещаются — заголовок
     встаёт над текстом. */
  .case-fact {
    grid-template-columns: 1fr;
    gap: 0.6em;
  }
}