/* Картинки записи.
   Сетка вместо колонки: у товара их бывает десяток, и в столбик они
   отодвинули бы текст на второй экран. */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--gap-small, 12px);
  margin-block: var(--gap, 24px);
}

.gallery a {
  /* Грид, а не блок: картинка встаёт по центру ячейки, когда её
     пропорция не совпадает с рамкой. */
  display: grid;
  border-radius: var(--radius, 8px);
  /* Скругление режет и картинку, а не только рамку ссылки. */
  overflow: hidden;
  /* Белый фон: товары сняты на белом, и серая подложка вокруг них
     читается как рамка, которой на снимке нет. */
  background: #fff;
  place-items: center;
}

.gallery img {
  display: block;
  /* Занимает ячейку целиком и вписывается в неё: контейнер уже
     центрирует, а высота нужна, чтобы картинка стояла посередине, а не
     липла к верху. */
  block-size: 100%;
  inline-size: 100%;
  /* Общая пропорция держит ряд ровным, а contain вписывает картинку
     целиком: у товаров разные формы, и обрезка съедала бы им края. */
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

/* Во всю ширину: картинки идут одна под другой, каждая на ширину
   макета, высота по пропорции снимка. Так показывают работу, где
   картинка и есть содержимое, а не товар, который выбирают глазами из
   десятка. Общая пропорция здесь не задаётся нарочно: у макетов и
   разворотов она разная, и рамка резала бы одни и добавляла поля
   другим. */
.gallery--full {
  grid-template-columns: 1fr;
}

.gallery--full img {
  block-size: auto;
  max-block-size: none;
  aspect-ratio: auto;
}

/* Одна картинка сеткой не раскладывается: она встала бы в узкую
   колонку слева, хотя места под неё вся строка. */
.gallery:has(a:only-child) {
  grid-template-columns: 1fr;
}

.gallery:has(a:only-child) img {
  aspect-ratio: auto;
  max-block-size: 60vh;
  object-fit: contain;
}

/* Правило одной картинки стоит выше и по весу перебивает раскладку во
   всю ширину: там ограничение высоты экраном не нужно, картинка и
   должна занять свою ширину целиком. */
.gallery--full:has(a:only-child) img {
  max-block-size: none;
}