/* Сітка. Десктоп 12 колонок по 84 з ґатером 24 і полями 120 при ширині 1512.
   Мобільний 4 колонки з ґатером 16 і полями 16.
   Колонки плинні — на проміжних ширинах тягнуться, пропорції зберігаються. */

.page {
  max-width: var(--page-max);
  margin-inline: auto;
}

/* Доріжка голів позиціонується відносно main */
main.page { position: relative; }

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--gutter);
  padding-inline: var(--margin);
}

/* Позиції з макета. Десктоп: колонка 1 = 120px, колонка 3 = 336px, колонка 7 = 768px */
.col-full   { grid-column: 1 / -1; }
.col-left   { grid-column: 3 / span 3; }  /* 300px — підпис зліва */
.col-right  { grid-column: 7 / span 4; }  /* 408px — текстова колонка */
.col-wide   { grid-column: 3 / span 8; }  /* 840px — широке медіа */
.col-half-l { grid-column: 3 / span 4; }  /* 408px — ліве медіа пари */
.col-half-r { grid-column: 7 / span 4; }  /* 408px — праве медіа пари */

@media (max-width: 767px) {
  .col-left, .col-right, .col-wide,
  .col-half-l, .col-half-r { grid-column: 1 / -1; }
}

/* Фул-блід: виходить за поля на всю ширину вікна */
.bleed {
  grid-column: 1 / -1;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* Вертикальний ритм */
.stack > * + * { margin-top: var(--section-gap); }
.stack-lg > * + * { margin-top: var(--section-gap-lg); }