/* Страница «Продукты» (products.html) и страница продукта (product.html). Подключается только на них,
   после style.css: те же переменные и размеры (1rem = 10 px на 1920), разбивка по устройствам та же.
   Перенесено из прототипа docs/prototypes/products 05.10.2026 без изменений вида. */

/* ---------- рисунок частиц и снимок СЭМ ---------- */
.particles { display: block; width: 100%; height: 100%; }
.particles * { vector-effect: non-scaling-stroke; stroke-width: 1.6px; }
.particles .core { fill: currentColor; fill-opacity: .22; }
.particles--hero * { stroke-width: 1.4px; }
.prod-photo { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }

/* ---------- первый экран: черно-белое фото, размытие и затемнение как у направлений ---------- */
.hero--catalog { height: min(91.1rem, 100vh); }

/* ---------- 1. продукты: вкладки и карточки ---------- */
.lp-groups { padding-top: 12rem; }
.prod-tabs {
  margin-top: 6.4rem; display: flex; gap: 4.8rem; border-bottom: 2px solid var(--stroke);
  overflow-x: auto; scrollbar-width: none;
}
.prod-tab {
  flex: none; padding-bottom: 2rem; margin-bottom: -2px; border-bottom: 3px solid transparent;
  font-size: 2.8rem; font-weight: 500; letter-spacing: -0.05rem; color: var(--date); white-space: nowrap;
  transition: color .2s, border-color .2s;
}
.prod-tab:hover { color: var(--ink); }
.prod-tab[aria-selected="true"] { color: var(--green-deep); border-color: var(--green); }
.prod-tab sup { margin-left: .6rem; font-family: var(--font-alt); font-size: 1.6rem; font-weight: 400; }
.prod-tabs-lead { margin-top: 3.2rem; max-width: 110rem; font-size: 2.4rem; font-weight: 300; line-height: 1.4; }

/* сетка карточек: строки каждой карточки лежат на сетке ряда (subgrid), поэтому название, характеристика,
   паспорт и «подробнее» у соседних карточек стоят на одной линии при любой длине текста */
.prod-grid { margin-top: 4.8rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4.4rem 2.2rem; }

/* ---------- карточка продукта: строка технического паспорта ---------- */
.pcard {
  grid-row: span 6; display: grid; grid-template-rows: subgrid; row-gap: 0;
  border: 2px solid var(--stroke); border-radius: var(--radius-l); overflow: hidden; background: var(--white);
  transition: border-color .25s;
}
.pcard:hover { border-color: var(--green); }
/* картинка у всех темная: снимок СЭМ или рисунок формы светлой линией на том же фоне, карточки одной серией */
.pcard__img { position: relative; height: 28rem; overflow: hidden; background: #161917; color: rgba(242, 253, 251, .75); }
.pcard__img > * { position: absolute; inset: 0; }
.pcard__img .particles { opacity: .9; }
.pcard__img .prod-photo { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.pcard:hover .pcard__img .prod-photo, .pcard:hover .pcard__img .particles { transform: scale(1.04); }
.pcard__img .particles { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.pcard__group { padding: 2.8rem 3.2rem 0; font-family: var(--font-alt); font-size: 1.7rem; text-transform: uppercase; letter-spacing: .02em; color: var(--green); }
.pcard__name { padding: 1rem 3.2rem 0; font-size: 3.2rem; font-weight: 500; line-height: 1.15; letter-spacing: -0.05rem; color: var(--green-deep); transition: color .2s; }
.pcard:hover .pcard__name { color: var(--green); }
.pcard__trait { padding: .8rem 3.2rem 0; font-family: var(--font-alt); font-size: 2rem; line-height: 1.35; color: var(--date); }
/* в списках линии только между строками, над первой и под последней их нет (правило владельца 01.10.2026) */
.pcard__specs { margin: 2.4rem 3.2rem 0; }
.pcard__specs > div { display: grid; grid-template-columns: 16rem 1fr; gap: 1.6rem; padding: 1.4rem 0; }
.pcard__specs > div + div { border-top: 2px solid var(--stroke); }
.pcard__specs > div:first-child { padding-top: 0; }
.pcard__specs > div:last-child { padding-bottom: 0; }
.pcard__specs dt { font-family: var(--font-alt); font-size: 1.6rem; text-transform: uppercase; color: var(--date); padding-top: .2rem; }
.pcard__specs dd { margin: 0; font-size: 2rem; line-height: 1.35; }
.pcard__more {
  display: inline-flex; align-items: center; gap: 1.2rem; justify-self: end; align-self: end; padding: 2.4rem 3.2rem 2.8rem;
  font-size: 1.8rem; font-weight: 500; text-transform: uppercase; letter-spacing: -0.05rem; color: var(--green);
}
.pcard__more svg { width: 2rem; height: 2rem; transition: transform .2s; }
.pcard:hover .pcard__more svg { transform: translateX(.4rem); }
/* ---------- под микроскопом (внизу, перед вопросами): снимок без надписей слева, справа заголовок, миниатюры
   и три довода. Колонки одной высоты: правая растягивается по снимку, доводы прижаты к низу ---------- */
.lp-proof { padding-top: var(--section-gap); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8rem; align-items: stretch; }
.proof-fig { position: relative; margin: 0; }
/* снимок по высоте правой колонки: верх по заголовку, низ по последнему доводу */
.proof-fig__img { height: 100%; min-height: 60rem; border-radius: var(--radius-l); overflow: hidden; background: #1a1a1a; }
.proof-fig__img img { width: 100%; height: 100%; object-fit: cover; }
.proof-side { display: flex; flex-direction: column; justify-content: space-between; gap: 4.8rem; }
/* миниатюры одной лентой со стрелками справа (два ряда владелец отверг 01.10.2026). У ленты поле 6px:
   рамка выбранной миниатюры стоит снаружи картинки (outline-offset), без поля ее обрезал бы край ленты */
/* стрелки над лентой справа (сбоку владелец отверг), в ленте целое число миниатюр: ширину делит
   сама лента (--shots штук на виду), листание на одну, поэтому обрезанной миниатюры у края нет */
.proof-strip { --shots: 4; display: flex; flex-direction: column; gap: 1.6rem; }
/* стрелки ближе к подзаголовку: общий отступ колонки 4.8rem тут слишком большой (замечание владельца),
   от подзаголовка до стрелок 1.6rem, как от стрелок до миниатюр */
.proof-side > .proof-strip { margin-top: -3.2rem; }
.proof-thumbs { flex: 1; min-width: 0; display: flex; gap: 1.6rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 6px; scrollbar-width: none; padding: 6px; margin: -6px; }
.proof-thumbs::-webkit-scrollbar { display: none; }
.proof-thumb { scroll-snap-align: start; flex: 0 0 calc((100% - (var(--shots) - 1) * 1.6rem) / var(--shots)); }
/* стрелки сайта (.square-btn), только меньше, по середине высоты миниатюры */
.proof-arrows { display: flex; gap: 1rem; align-self: flex-end; }
.proof-arrows[hidden] { display: none; }
.proof-arrows .square-btn { width: 4.8rem; height: 4.8rem; border-radius: 1rem; }
.proof-arrows .square-btn svg { width: 3.6rem; height: 3.6rem; }
.proof-arrows .square-btn:first-child svg { transform: rotate(180deg); }
.proof-thumb { position: relative; min-width: 0; text-align: left; }
.proof-thumb img { width: 100%; height: auto; aspect-ratio: 7 / 5; object-fit: cover; border-radius: 1.2rem; outline: 3px solid transparent; outline-offset: 3px; transition: outline-color .2s, opacity .2s; opacity: .55; }
.proof-thumb:hover img { opacity: .85; }
.proof-thumb[aria-selected="true"] img { opacity: 1; outline-color: var(--green); }
.proof-thumb span { display: block; margin-top: 1rem; font-family: var(--font-alt); font-size: 1.8rem; text-transform: uppercase; color: var(--date); }
.proof-thumb[aria-selected="true"] span { color: var(--green); }
.proof-thumb .keep-case { text-transform: none; }
/* три довода: короткое утверждение и подкрепление фактом. Линии только между доводами, сверху и снизу их нет */
.proof-points li { padding: 2.8rem 0; }
.proof-points li + li { border-top: 2px solid var(--stroke); }
.proof-points li:first-child { padding-top: 0; }
.proof-points li:last-child { padding-bottom: 0; }
.proof-points__title { font-size: 2.8rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.05rem; color: var(--green-deep); }
.proof-points__text { margin-top: 1rem; font-family: var(--font-alt); font-size: 2.2rem; font-weight: 300; line-height: 1.4; }

/* ---------- частые вопросы: шапка сверху, шесть вопросов в два столбика по три,
   каждый раскрывается независимо ---------- */
.lp-faq { padding-top: var(--section-gap); }
.faq { margin-top: 6.4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0 8rem; align-items: start; }
.faq__item + .faq__item { border-top: 2px solid var(--stroke); }
.faq__item:first-child summary { padding-top: 0; }
.faq__item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 3rem; padding: 3rem 0;
  list-style: none; cursor: pointer; font-size: 2.8rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.05rem;
  color: var(--green-deep); transition: color .2s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--green); }
.faq__item summary svg {
  width: 4.4rem; height: 4.4rem; padding: 1rem; flex: none; border-radius: 1.2rem; background: var(--bg-soft);
  color: var(--green-deep); transition: background-color .2s, color .2s;
}
/* поворачивается только крестик, подложка остается квадратной */
.faq__item summary svg path { transform-box: fill-box; transform-origin: center; transition: transform .25s; }
.faq__item[open] summary svg { background: var(--green-deep); color: var(--white); }
.faq__item[open] summary svg path { transform: rotate(45deg); }
.faq__item p { max-width: 110rem; padding: 0 0 3.2rem; font-family: var(--font-alt); font-size: 2.2rem; font-weight: 300; line-height: 1.5; }
/* ---------- 2. подбор под задачу: список задач слева, подходящие материалы справа ----------
   Невыбранные строки обычного темно-серого цвета, чтобы не казались недоступными. Выбранная
   отмечена зеленой полосой слева, белым фоном и стрелкой. Наведение дает тот же фон без полосы */
.lp-tasks { margin-top: var(--section-gap); padding-block: 10rem; background: var(--bg-soft); }
.task-pick { margin-top: 6.4rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 8rem; align-items: stretch; }
.task-list { display: flex; flex-direction: column; gap: .8rem; }
.task-item {
  position: relative; width: 100%; display: flex; align-items: center; gap: 2rem; padding: 2.6rem 3.2rem;
  border-radius: var(--radius-m); text-align: left;
  font-size: 3.6rem; font-weight: 400; line-height: 1.15; letter-spacing: -0.02em; color: #4a4e57;
  transition: color .2s, background-color .2s;
}
.task-item svg { width: 2.8rem; height: 2.8rem; color: var(--green); opacity: 0; transform: translateX(-1.2rem); transition: opacity .2s, transform .2s; }
.task-item::before {
  content: ""; position: absolute; left: 0; top: 1.6rem; bottom: 1.6rem; width: .5rem; border-radius: .5rem;
  background: var(--green); transform: scaleY(0); transition: transform .25s;
}
.task-item:hover { background: rgba(255, 255, 255, .7); color: var(--green); }
.task-item:hover svg { opacity: 1; transform: translateX(.4rem); }
.task-item[aria-current="true"] { background: var(--white); color: var(--green-deep); font-weight: 500; }
.task-item[aria-current="true"]::before { transform: none; }
.task-item[aria-current="true"] svg { opacity: 1; transform: none; }
/* правая часть тянется на высоту списка задач: низ карточек всегда на одной линии с низом списка,
   свободное место забирает снимок (строка 1fr) */
.task-panel { display: flex; flex-direction: column; height: 100%; }
.task-panel.is-in { animation: intro-rise .5s cubic-bezier(.2, .7, .2, 1); }
.task-panel__label { font-family: var(--font-alt); font-size: 1.9rem; text-transform: uppercase; color: var(--green); }
.task-panel__text { margin-top: 1.6rem; font-size: 2.8rem; font-weight: 300; line-height: 1.4; }
/* карточки на общей сетке: снимок, название, характеристика, ссылка. Через subgrid строки
   у соседних карточек одной высоты, поэтому «подробнее» стоят на одной линии */
.task-panel__items {
  flex: 1; margin-top: 4rem; display: grid; grid-template-columns: repeat(2, 1fr);
  grid-template-rows: minmax(18rem, 1fr) auto auto auto; column-gap: 2.2rem;
}
.task-panel__items--1 { grid-template-columns: 1fr; }
.task-panel__items--3 { grid-template-columns: repeat(3, 1fr); column-gap: 1.8rem; }
.task-prod {
  grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; border-radius: var(--radius-l); overflow: hidden; background: var(--white);
  transition: transform .25s, box-shadow .25s;
}
.task-prod:hover { transform: translateY(-.6rem); box-shadow: 0 1.6rem 4rem rgba(37, 67, 57, .12); }
.task-prod:hover .prod-photo { transform: scale(1.05); }
/* картинка как в карточках продуктов: темный фон, снимок СЭМ или рисунок формы светлой линией */
.task-prod__img { position: relative; overflow: hidden; border-radius: var(--radius-l); color: rgba(242, 253, 251, .75); background: #161917; }
.task-prod__img > * { position: absolute; inset: 0; }
.task-prod__name { padding: 2.4rem 2.8rem 0; font-size: 2.8rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.05rem; color: var(--green-deep); }
.task-prod__trait { padding: .8rem 2.8rem 0; font-family: var(--font-alt); font-size: 2rem; line-height: 1.35; color: var(--date); }
.task-prod .link-arrow { justify-self: end; align-self: end; padding: 2rem 2.8rem 2.8rem; }
.task-prod:hover .link-arrow svg { transform: translateX(.4rem); }
.task-panel__items--3 .task-prod__name { padding: 2rem 2.2rem 0; font-size: 2.4rem; }
.task-panel__items--3 .task-prod__trait { padding: .8rem 2.2rem 0; font-size: 1.8rem; }
.task-panel__items--3 .link-arrow { padding: 1.6rem 2.2rem 2.4rem; }

/* заголовок блока задач с кнопкой «написать» в правом верхнем углу */
.task-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 4rem; }
.task-head__btn { flex-shrink: 0; }
/* ---------- страница продукта ---------- */
.item-kicker { margin-bottom: 3.2rem; font-family: var(--font-alt); font-size: 2rem; text-transform: uppercase; color: var(--mint); opacity: .75; }

/* снимок и характеристики: снимок тянется по высоте правой колонки, как в «Под микроскопом» */
.item-sheet { padding-top: var(--section-gap); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8rem; align-items: stretch; }
.item-sheet__img { position: relative; margin: 0; min-height: 60rem; border-radius: var(--radius-l); overflow: hidden; background: #161917; color: rgba(242, 253, 251, .75); }
.item-sheet__img > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.item-sheet__img img { object-fit: cover; }
.item-sheet__side { display: flex; flex-direction: column; gap: 4.8rem; }
.item-specs { margin: 0; }
.item-specs > div { display: grid; grid-template-columns: 24rem 1fr; gap: 2.4rem; padding: 2.2rem 0; }
.item-specs > div + div { border-top: 2px solid var(--stroke); }
.item-specs > div:first-child { padding-top: 0; }
.item-specs > div:last-child { padding-bottom: 0; }
.item-specs dt { font-family: var(--font-alt); font-size: 1.8rem; text-transform: uppercase; color: var(--date); padding-top: .3rem; }
.item-specs dd { margin: 0; font-size: 2.4rem; line-height: 1.35; }
.item-sheet__cta { margin-top: auto; display: flex; align-items: center; gap: 3.2rem; }
.item-sheet__note { font-family: var(--font-alt); font-size: 2rem; font-weight: 300; line-height: 1.4; color: var(--date); max-width: 44rem; }

/* о продукте: раскладка и выравнивание низа колонок от dir-about сайта. Текст обычным начертанием
   (light в длинном тексте читался тяжело), цифры могут быть длинными («по запросу»), поэтому без nowrap */
.item-about__text { font-size: 2.6rem; font-weight: 400; line-height: 1.6; }
.item-about__text p + p { margin-top: 2rem; }
.item-about__sub { margin-top: 4rem; font-size: 2.8rem; font-weight: 500; color: var(--green-deep); }
.item-about__text .bullets { margin-top: 2rem; }
.item-stats .stat__value { line-height: 1.1; white-space: nowrap; }
.item-stats .stat__label { margin-top: 1.2rem; white-space: normal; line-height: 1.3; }
.item-about__label { margin-bottom: 1.6rem; font-family: var(--font-alt); font-size: 1.8rem; text-transform: uppercase; color: var(--date); }
.prod-more { padding-top: var(--section-gap); }
/* ---------- планшет ---------- */
@media (max-width: 1100px) {
  .prod-grid { grid-template-columns: 1fr 1fr; }
  .task-pick { gap: 5rem; }
  .task-item { font-size: 3rem; padding: 2.2rem 2.4rem; }
  .lp-proof, .item-sheet { gap: 5rem; }
  .task-panel__items, .task-panel__items--1, .task-panel__items--3 { display: flex; flex-direction: column; gap: 2.2rem; }
  .task-prod { display: flex; flex-direction: column; }
  .task-prod__img { height: 24rem; }
  .task-prod .link-arrow { align-self: flex-end; }
}

/* ---------- телефон ---------- */
@media (max-width: 760px), (max-width: 1100px) and (max-height: 500px) {
  .hero--catalog { height: auto; }
  .lp-groups { padding-top: 8rem; }
  .prod-tabs { margin-top: 4rem; gap: 3.2rem; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .prod-tab { font-size: 2.56rem; }
  .prod-tab sup { font-size: 1.92rem; }
  .prod-tabs-lead { font-size: 2.56rem; }
  .prod-grid { grid-template-columns: 1fr; gap: 3.2rem; margin-top: 3.2rem; }
  .pcard__img { height: 24rem; }
  .pcard__group, .pcard__name, .pcard__trait { padding-left: 2.8rem; padding-right: 2.8rem; }
  .pcard__specs { margin-inline: 2.8rem; }
  .pcard__more { padding: 2.4rem 2.8rem 2.8rem; font-size: 2.08rem; }
  .pcard__group, .pcard__specs dt { font-size: 2rem; }
  .pcard__name { font-size: 3.6rem; }
  .pcard__trait, .pcard__specs dd { font-size: 2.4rem; }


  .lp-tasks { padding-block: 8rem; }
  .task-pick { grid-template-columns: 1fr; gap: 3.2rem; margin-top: 4rem; }
  /* задачи на телефоне столбиком кнопок: все видны сразу, листать вбок не нужно */
  .task-list { gap: 1.2rem; }
  .task-item {
    padding: 0 2.4rem; height: 7.2rem; border: 2px solid var(--stroke); border-radius: 1.2rem; background: var(--white);
    font-size: 2.4rem; font-weight: 500; letter-spacing: -0.05rem; color: var(--ink);
  }
  .task-item svg, .task-item::before { display: none; }
  .task-item:hover { background: var(--white); color: var(--ink); }
  .task-item[aria-current="true"] { background: var(--green-deep); border-color: var(--green-deep); color: var(--white); }
  .task-panel { position: static; }
  .task-panel__text { font-size: 2.72rem; }
  .task-panel__items { margin-top: 3.2rem; gap: 1.6rem; }
  .task-prod__img { height: 20rem; }
  .task-head { flex-direction: column; gap: 3.2rem; }
  .item-sheet { grid-template-columns: 1fr; gap: 4rem; }
  .item-sheet { padding-top: var(--section-gap); }
  .item-sheet__img { min-height: 0; aspect-ratio: 1; }
  .item-specs > div { grid-template-columns: 1fr; gap: .6rem; }
  .item-specs dt, .item-about__label, .item-kicker { font-size: 2rem; }
  .item-specs dd, .item-about__text { font-size: 2.56rem; }
  .item-sheet__cta { flex-direction: column; align-items: flex-start; gap: 2rem; }
  .item-sheet__note { font-size: 2.4rem; }
  /* minmax(0, 1fr): иначе лента миниатюр распирает колонку шире экрана */
  .lp-proof { grid-template-columns: minmax(0, 1fr); gap: 4rem; }
  /* на телефоне: заголовок, снимок, миниатюры под ним, факты */
  .proof-side { display: contents; }
  .lp-proof > .proof-fig { order: 2; }
  .proof-fig__img { height: auto; min-height: 0; aspect-ratio: 1; }
  .proof-side > .section-head { order: 1; }
  .proof-side > .proof-strip { order: 3; margin-top: -1.6rem; }
  .proof-points { order: 4; }
  .proof-strip { --shots: 3; }
  .proof-arrows .square-btn { width: 5.6rem; height: 5.6rem; }
  .proof-arrows .square-btn svg { width: 4.4rem; height: 4.4rem; }
  .proof-thumb span { font-size: 2rem; }
  .proof-points__title { font-size: 3rem; }
  .proof-points__text { font-size: 2.56rem; }
  .faq { margin-top: 4rem; grid-template-columns: 1fr; }
  /* на телефоне столбики идут друг под другом: между ними обычная линия, как между вопросами */
  .faq__col + .faq__col { border-top: 2px solid var(--stroke); }
  .faq__col + .faq__col .faq__item:first-child summary { padding-top: 2.8rem; }
  .faq__item summary { font-size: 2.88rem; padding: 2.8rem 0; }
  .faq__item p { padding-right: 0; font-size: 2.56rem; }
  .task-prod__name { font-size: 2.72rem; }
  .task-prod__trait, .task-panel__label { font-size: 2.24rem; }



}

/* телефон: паспорт в карточке подписью над значением, длинные подписи («люминесценция») не налезают;
   подбор под задачу раскрывающимся списком, материалы встают под выбранной задачей (place() в products.js) */
@media (max-width: 760px), (max-width: 1100px) and (max-height: 500px) {
  .pcard__specs > div { grid-template-columns: 1fr; gap: .4rem; }
  .task-pick { gap: 0; }
  .task-list li:has(.task-panel) { padding-bottom: 2.4rem; }
  .task-list .task-panel { margin-top: 2.4rem; }
  .task-list .task-panel__label { display: none; }
  .task-list .task-panel__text { margin-top: 0; }
  .task-list .task-panel__items { margin-top: 2.4rem; }
  .task-item[aria-current="true"] { position: relative; }
}

/* планшет (iPad в обеих ориентациях, 761–1100): две колонки как на компьютере, но правая колонка узкая,
   поэтому материалы компактными строками (снимок слева, текст справа). Строки делят высоту поровну,
   и низ последней карточки совпадает с низом списка задач */
@media (min-width: 761px) and (max-width: 1100px) and (min-height: 501px) {
  .task-pick { align-items: stretch; }
  .task-list { justify-content: space-between; }
  .task-panel__items, .task-panel__items--1, .task-panel__items--3 { flex: 1; display: flex; flex-direction: column; gap: 1.6rem; margin-top: 3.2rem; }
  .task-panel__items .task-prod { flex: 1; display: grid; grid-template-columns: 15rem minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 2.4rem; }
  .task-panel__items .task-prod__img { grid-row: 1 / -1; height: auto; min-height: 11rem; }
  .task-panel__items .task-prod__name { padding: 1.8rem 2rem 0 0; font-size: 2.6rem; }
  .task-panel__items .task-prod__trait { padding: .6rem 2rem 0 0; font-size: 1.9rem; }
  .task-panel__items .task-prod .link-arrow { justify-self: end; align-self: end; padding: 1.2rem 2rem 1.6rem 0; }
}

/* узкий планшет: колонка снимков узкая, в ленте три миниатюры, а не четыре */
@media (min-width: 761px) and (max-width: 900px) and (min-height: 501px) {
  .proof-strip { --shots: 3; }
}