/* Блок обложек лукбуков вне модуля (главная, CMS-страницы).

   Карточка — та же, что на витрине /lookbooks. Правила .mdlb-card
   продублированы из mdlookbook.css намеренно: на главной тот файл не
   подключается (он для страниц самого модуля), а виджет должен выглядеть
   одинаково в обоих местах. Значения совпадают один в один, поэтому на
   странице витрины, где грузятся оба файла, конфликта нет.

   Отличие от витрины одно: число колонок задаётся в редакторе, а не
   подбирается автоматически по ширине. */

.mdlb-covers {
  display: grid;
  grid-template-columns: repeat(var(--mdlb-cols, 4), minmax(0, 1fr));
  gap: 20px;
}

.mdlb-covers--cols-2 { --mdlb-cols: 2; }
.mdlb-covers--cols-3 { --mdlb-cols: 3; }
.mdlb-covers--cols-4 { --mdlb-cols: 4; }

.mdlb-covers .mdlb-card {
  background: #fff;
  border: 1px solid #e3e3e3;
}

.mdlb-covers .mdlb-card__link {
  display: block;
  padding: 24px;
  text-align: center;
  color: inherit;
  text-decoration: none;
}

/* Обложки приходят с разными пропорциями. Без общей рамки подписи в ряду
   разъезжаются по высоте, поэтому кадрируем по одному соотношению. */
.mdlb-covers .mdlb-card__media {
  display: block;
  margin-bottom: 18px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #f4f4f4;
}

.mdlb-covers .mdlb-card__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.mdlb-covers .mdlb-card__meta {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9b9b9b;
}

.mdlb-covers .mdlb-card__title {
  display: block;
  font-size: 18px;
}

/* Планшет — две колонки, телефон — одна: у обложек вертикальный кадр,
   в четыре колонки на телефоне они превращаются в полоски. */
@media (max-width: 1024px) {
  .mdlb-covers { --mdlb-cols: 2; }
}

@media (max-width: 575px) {
  .mdlb-covers { --mdlb-cols: 1; }
}