/* pages/collections — /collections, /en/collections (план DEV0317, задача 2):
   заголовок + сетка карточек, 2 колонки на мобиле, 3 на десктопе (брейкпоинт
   1024px, как везде в pages/*.css). Только var(--*) — числа сеток/отступов
   литералом, как в gift-sets.css. */

.collections { display: flex; flex-direction: column; gap: 24px; padding-block: 24px 64px; }
.collections__title { margin: 0; font-size: 34px; }
@media (min-width: 1024px) {
  .collections__title { font-size: 44px; }
}

.collections__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (min-width: 1024px) {
  .collections__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}

.collections-card {
  display: flex; flex-direction: column; gap: var(--space-2);
  color: inherit; text-decoration: none;
}
.collections-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.collections-card__media { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-neutral-300); }
.collections-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.collections-card__media-placeholder { display: block; width: 100%; height: 100%; }

.collections-card__body { display: flex; flex-direction: column; gap: 4px; }
.collections-card__kicker {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-accent-2-700); font-weight: 700;
}
.collections-card__title { font-family: var(--font-heading); font-size: 20px; line-height: 1.1; }
@media (min-width: 1024px) {
  .collections-card__title { font-size: 24px; }
}
.collections-card__until { align-self: flex-start; margin-top: 2px; }