/* =========================================================
   Berdicool — страницы кейсов
   Каждый блок кейса — «холст» (как Zero Block на Тильде): элементы стоят
   по координатам, а координаты для 5 ширин экрана лежат в <style> самой страницы.
   --g — ширина сетки, --u — единица размера (на телефоне растёт вместе с экраном).
   ========================================================= */
:root { --g: 1200; --u: 1px; }
@media (max-width: 1199px) { :root { --g: 960; } }
@media (max-width: 959px)  { :root { --g: 640; } }
@media (max-width: 639px)  { :root { --g: 480; } }
@media (max-width: 479px)  { :root { --g: 320; --u: calc(100vw / 320); } }

body.case { background: #000; color: #fff; }
.case-page { background: #000; overflow: hidden; }

/* как на Тильде: всё, что за краем блока, не видно (так спрятаны мобильные элементы на компьютере и наоборот) */
.zb { position: relative; overflow: hidden; overflow: clip; }
.zb__in { position: relative; width: calc(var(--g) * var(--u)); height: 100%; margin: 0 auto; }
.e { position: absolute; display: block; }

/* Подвал в кейсах — по сетке кейса (как на Тильде): поля как у контента, колонки 500 / 330 / 330 */
body.case .footer {
  padding-left: calc((100% - var(--g) * var(--u)) / 2 + 20 * var(--u));
  padding-right: calc((100% - var(--g) * var(--u)) / 2 + 20 * var(--u));
}
@media (min-width: 960px) {
  body.case .footer__top, body.case .footer__bottom { grid-template-columns: 500fr 330fr 330fr; }
}
.e.text { word-wrap: break-word; }
.e.text strong, .e.text b { font-weight: 700; }
.e.text a { text-decoration: underline; }
.e.image, .e.shape { overflow: hidden; }
.e.image img { width: 100%; height: 100%; object-fit: cover; }
.e.shape { background-position: center; background-size: cover; background-repeat: no-repeat; }
.e.spin { animation: marker-spin 4s linear infinite; }

/* ---------- Посмотрите также ---------- */
.more { color: #fff; padding: calc(120 * var(--u)) 0 calc(178 * var(--u)); }
.more__inner { width: calc(var(--g) * var(--u)); margin: 0 auto; padding: 0 calc(20 * var(--u)); }
.more__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  border-top: 1px solid var(--line);
  padding-top: 32px; margin-bottom: 40px;
}
.more__title { font-size: 24px; line-height: 29px; font-weight: 500; letter-spacing: -0.72px; }
.more__all { font-size: 14px; line-height: 18px; transition: color .2s ease; }
.more__row {
  display: flex; gap: 24px; align-items: flex-start;
  /* лента начинается по сетке и тянется до правого края окна */
  margin-right: calc((100vw - var(--g) * var(--u)) / -2 - 20 * var(--u));
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.more__row::-webkit-scrollbar { display: none; }
.more__row::after { content: ''; flex: 0 0 1px; }   /* отступ после последней карточки */
.more__card { flex: 0 0 auto; width: 440px; user-select: none; -webkit-user-select: none; }
.more__img { height: 330px; overflow: hidden; background: #111; }
.more__img img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; transition: opacity .3s ease; }
.more__cap { display: flex; justify-content: space-between; gap: 16px; margin-top: 16px; font-size: 14px; line-height: 18px; }
.more__cap > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.more__cap > span:last-child { flex: none; }
.more__cap .gray { color: var(--gray); }

@media (hover: hover) and (pointer: fine) {
  .more__row { overflow-x: hidden; cursor: grab; }
  .more__row.is-drag { cursor: grabbing; }
  .more__row.is-drag a { pointer-events: none; }
  .more__card:hover .more__img img { opacity: .8; }
  .more__all:hover { color: var(--red); }
}
@media (max-width: 1199px) {
  .more { padding: 100px 0 138px; }
  .more__card { width: 400px; }
  .more__img { height: 300px; }
}
@media (max-width: 959px) {
  .more { padding: 80px 0 98px; }
  .more__head { padding-top: 24px; margin-bottom: 32px; }
  .more__title { font-size: 20px; line-height: 24px; letter-spacing: -0.6px; }
  .more__row { gap: 16px; }
  .more__card { width: 360px; }
  .more__img { height: 270px; }
  .more__cap { margin-top: 12px; }
}
@media (max-width: 639px) {
  .more { padding: 64px 0 92px; }
  .more__card { width: 300px; }
  .more__img { height: 225px; }
}
@media (max-width: 479px) {
  .more { padding: calc(64 * var(--u)) 0 calc(95 * var(--u)); }
  .more__card { width: calc(280 * var(--u)); }
  .more__img { height: calc(210 * var(--u)); }
  .more__cap { font-size: 12px; line-height: 15px; }
}