:root {
  --margin-header: 160rem;
  --margin-meaning: 70rem;
  --margin-grid: 25rem;

  /* Не уменьшаются на мобиле */
  --margin-text: 25rem;
  --margin-line-height: 15rem;
  --margin-grid-half: 12.5rem;
}

@media screen and (max-width: 800px) {
  :root {
    --margin-header: 100rem;
    --margin-meaning: 50rem;
    --margin-grid: 15rem;
  }
}

/* ОСНОВНЫЕ */

/* Контейнер с отступом страницы */
.hug {
  padding-left: var(--margin-grid);
  padding-right: var(--margin-grid);
}

/* Ограничиваем ширину артикла на больших экранах */
@media screen and (min-width: 1600px) {

  article.hug,
  article .hug {
    max-width: 1440px;
  }
}

/* Блок во всю ширину */
article .full {
  margin-left: calc(-1 * var(--margin-grid));
  margin-right: calc(-1 * var(--margin-grid));
  width: 100vw;
  max-width: initial;

  /* Непрозрачный для перекрашивания */
  background-color: var(--background-color);
}

article .full > img,
article .full > picture,
article .full > video {
  width: 100.1%;
  /* .1 чтобы не торчали волосы по краям из-за скейла */
}

/* Блок во всю высоту */
article .fullHeight {
  min-height: 100vh;
}

article .fullHeight>video {
  height: 100%;
  object-fit: cover;
}

/* Текст в 7 колонок на десктопе */
article .text {
  max-width: calc((100vw - 13 * 24rem) / 12 * 7 + 24rem * 6);
}

@media screen and (max-width: 800px) {
  article .text {
    max-width: initial;
  }
}

/* Текст на поле справа */
.note {
  display: flex;
  justify-content: space-between;
}

.note>*:nth-child(2) {
  margin-top: initial;
  max-width: calc((100vw - 13 * 24rem) / 12 * 3 + 24rem * 2);
}

@media screen and (max-width: 800px) {
  .note {
    flex-direction: column;
  }

  .note>*:nth-child(2) {
    margin-top: var(--margin-text);
    max-width: initial;
  }
}

/* ВЕРТИКАЛЬНЫЕ */

/* Базовый */
article .text+*,
article .image+*,
article .caption+*,
article .cols+*,
article .box+*,
article .note+*,
article .grid+*,
article .outs+*,
article .masonry+*,
article .pin-spacer+* {
  margin-top: var(--margin-text);
}

/* Базовый под заголовком чуть больше, чтобы следующий блок не влезал в интерлиньяж */
article .header+* {
  margin-top: calc(var(--margin-text) + 5rem);
}

/* Первый объект в статье */
article>*:nth-child(1) {
  margin-top: var(--margin-header);
}

/* Обложка под шапкой */
article .cover {
  margin-top: var(--margin-grid);
}
article .cover.full {
  /* 24 паддинг меню + 8 строка меню (нижний паддинг вычитается контейнером меню */
  margin-top: -32rem; 
}

/* Подпись под картинкой */
article .caption,
article .image + .caption,
article .image + .small {
  margin-top: var(--margin-line-height);
}

/* У полноэкранных гридов оставляем отступы внутри */
/* Растягиваем блок с полями, чтобы ссылка стояла справа на больших мониторах */
article .grid.full,
article .note {
  margin-left: initial;
  margin-right: initial;
  width: calc(100vw - 2 * var(--margin-grid));
}


/* ВЁРСТКА */

/* Явно приклеить блок */
article .glue {
  margin-top: var(--margin-text) !important;
}

/* Не так сильно, когда заголовки друг за другом */
article .header.glue {
  margin-top: calc(var(--margin-header) / 2) !important;
}

/* Сильнее, когда колонки друг за другом */
article .cols.glue {
  margin-top: var(--margin-grid) !important;
}

/* Superglue приклеивает на межстрочный просвет */
article .superglue {
  margin-top: var(--margin-line-height) !important;
}

article .header.superglue,
article .header+*.superglue {
  margin-top: 30rem !important;
}

/* Явно отклеить блок */
article .unglue {
  margin-top: var(--margin-meaning) !important;
}

article .header.unglue {
  margin-top: var(--margin-header);
}


/* КОЛОНКИ */

article .cols {
  display: flex;
  gap: var(--margin-grid);
}

article .cols > * {
  width: 100%;
  margin-top: initial;
}

/* Выровнаять блоки по высоте */
article .cols.auto > * {
  width: initial;
}

/* Одна колонка на мобиле */
@media screen and (max-width: 800px) {
  article .cols.stack {
    flex-direction: column;
  }
}


/* BOX */

article .box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--margin-grid);
  gap: var(--margin-grid);
  background-color: var(--box-color);
}

article .box > * {
  /* Чтобы содержимое не вываливалось из флекса */
  max-width: 100%;
  margin-top: initial;
}

article .box.full {
  /* Потому что паддинги добавляют ширины */
  width: calc(100vw - 2* var(--margin-grid));
}


/* БЛОК С ФОНОМ */

.full .hug {
  padding-top: var(--margin-text);
  padding-bottom: var(--margin-text);
}

/* Если первы или последний элемент — фулскриновый, убираем нижний отступ в фулскриновом блоке */
.full .hug .full:first-child {
  margin-top: calc(-1 * var(--margin-text));
}

.full .hug .full:last-child {
  margin-bottom: calc(-1 * var(--margin-text));
}

/* СПИСКИ */
article ul {
  /*margin-left: var(--margin-grid);*/
  margin-left: 0;
  margin-top: var(--margin-grid-half) !important;
  /* Выравниваем отступ с падингом ниже */
}

article ul li {
  /* Убираем дефолтный отступ */
  margin-top: 0 !important;

  /* Полупадинг для ровного ховера */
  padding-top: var(--margin-grid-half);
  padding-bottom: var(--margin-grid-half);
}

article ul li:last-child {
  padding-bottom: 0;
}