/* Единый принцип выкладки картинок: кейсы, исследования, статьи блога.
   Эталон — витрина кейсов (/cases/case.css), он менялся последним и остаётся образцом.
   Здесь те же числа, но для страниц, у которых своя светлая тема и нет токенов case.css.

   Правило одно на все разделы:
   • превью и обложка — кадрируются под 16:9 с привязкой к верху (object-position:top center),
     потому что у скриншотов сайтов вся суть в шапке, а низ можно резать;
   • подложка тёмная — на ней у картинки с тёмными краями нет «белой рамки»,
     из-за которой раньше исследования смотрелись обрезком в паспарту;
   • рамки нет вообще, форму держат скругление и тень.
   16.08.2026 */

.shot{
  display:block; margin:0 0 34px;
  aspect-ratio:16/9; overflow:hidden;
  border-radius:14px; background:var(--shotbg,#101820);
  box-shadow:0 10px 30px rgba(16,24,32,.10);
}
.shot img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:top center;
}
/* Картинка внутри текста статьи: пропорции не режем, но оформляем так же */
figure.pic{margin:0 0 30px}
figure.pic img{
  width:100%; height:auto; display:block;
  border-radius:14px; background:var(--shotbg,#101820);
  box-shadow:0 10px 30px rgba(16,24,32,.10);
}
figure.pic figcaption{
  font-size:13.5px; line-height:1.5; margin-top:12px;
  color:var(--mut,#6b7784); max-width:64ch;
}

/* Документ-слайды («Размещение» собран из блоков .slide шириной ровно 1280px).
   Из-за жёсткой ширины на телефоне страница уезжала вбок целиком: браузер ужимал
   её под 1280 и вместе с ней «ехало» меню. Ширину делаем текучей, потолок оставляем.
   На «Загороде» вёрстка другая (.doc), этих правил он просто не встретит. */
.slide{width:100%; max-width:1170px}
@media(max-width:760px){
  .slide{min-height:0}
}

/* Узкий экран: пропорции НЕ меняем. Обложки исследований сделаны ровно 16:9,
   и любой другой кадр срезал бы им низ вместе с подписью. */
@media(max-width:760px){
  .shot{border-radius:12px; margin-bottom:24px}
}