/* Шрифт Roboto, файлы лежат в fonts/.
   Шрифт вариативный: один файл содержит все жирности от 100 до 900.
   Три файла — три набора символов, браузер берёт только нужные.
   Здесь значения записаны прямо: переменные в @font-face не работают.
   Путь идёт от этого файла стилей, а не от корня сайта. */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/roboto-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Расширенная латиница — отсюда берётся знак рубля */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/roboto-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/roboto-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Токены проекта */
:root {
  /* Цвета — сняты с экспорта Тильды.
     Имена уточним, когда на страницах станет видно, где какой стоит. */
  --color-bg: #fbf8f5;
  --color-bg-alt: #f8f5ed;
  --color-bg-dark: #111111;
  --color-text: #000000;
  --color-white: #ffffff;
  --color-gray: #c7c7c7;
  --color-line-dark: #292929;
  --color-accent: #1f5bff;
  --color-link: #ff8562;
  --color-video-bg: #000000;
  --color-telegram: #1d98dc;
  --color-arrow-bg: #e8e8e8;
  --color-dot-active: #222222;
  --color-divider: #666666;
  /* Затемнение страницы под увеличенным фото */
  --color-overlay: rgba(0, 0, 0, 0.9);

  /* Шрифты */
  --font-main: 'Roboto', Arial, sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  /* На Тильде заголовки просят 600, но показываются как 700 */
  --font-weight-bold: 700;
  --font-size-base: 16px;
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-22: 22px;
  --font-size-24: 24px;
  --font-size-26: 26px;
  --font-size-30: 30px;
  --font-size-38: 38px;
  --font-size-42: 42px;
  --line-height-base: 1.55;
  --line-height-tight: 1.45;
  --line-height-title: 1.23;
  --line-height-name: 1.35;
  --line-height-phone: 1.5;
  /* Размеры заголовков и мелкого текста добавляем по мере вёрстки страниц.
     Размеры шрифта берём с Тильды как есть, до кратных 4 не округляем. */

  /* Отступы, шаг 4 */
  --space-0: 0px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-44: 44px;
  --space-48: 48px;
  --space-56: 56px;
  --space-60: 60px;
  --space-64: 64px;
  --space-76: 76px;
  --space-88: 88px;
  --space-100: 100px;
  --space-104: 104px;
  --space-112: 112px;
  --space-120: 120px;
  --space-132: 132px;
  --space-140: 140px;
  --space-144: 144px;
  --space-152: 152px;
  --space-156: 156px;

  /* Размеры блоков */
  --container-max: 1200px;
  /* На среднем экране содержимое сужается, как на Тильде */
  --container-mid: 960px;
  /* На телефоне содержимое не шире 640 вместе с полями */
  --container-mobile: 640px;
  /* Узкая колонка текста: ширина самого текста, без полей */
  --column-narrow: 760px;
  --column-narrow-mid: 620px;
  /* Столбцы таблицы каналов; описание занимает остаток ширины */
  --channels-col-name: 240px;
  --channels-col-subs: 240px;
  --channels-col-role: 240px;
  --channels-col-name-mid: 200px;
  --channels-col-subs-mid: 200px;
  --channels-col-role-mid: 200px;
  --header-height: 80px;
  --header-height-mobile: 68px;
  --input-height: 60px;
  --button-height: 60px;
  /* Слайдер: ширина кадра и диаметр стрелки */
  --slider-width: 860px;
  --slider-width-mid: 700px;
  --slider-arrow: 40px;
  --icon-size-button: 28px;
  /* Первый экран главной: ширина строки под заголовком */
  --hero-lead-width: 400px;
  /* Скругления и тень */
  --radius-button: 8px;
  --radius-card: 4px;
  --radius-round: 50%;
  --shadow-card: 0px 0px 12px rgba(0, 0, 0, 0.1);
  --footer-height: 120px;
  --line-thin: 1px;
  /* Аватарка канала в таблице на странице Ютуба */
  --avatar-size: 48px;
  /* Значки соцсетей */
  --icon-size: 32px;

  /* Кнопка-бургер: три полоски, которые складываются в крестик */
  --burger-width: 28px;
  --burger-height: 20px;
  --burger-line: 4px;
  --burger-step: 8px;
  --burger-angle: 45deg;

  /* Прочее */
  --z-header: 990;
  --z-overlay: 1000;
  /* Пропорции: плитка фото вертикальная, видео широкое */
  --ratio-photo: 3 / 4;
  --ratio-video: 16 / 9;
  --ratio-slide: 86 / 55;
  --ratio-square: 1 / 1;
  --angle-flip: 180deg;
  --photo-mobile-width: 50%;
  --opacity-active: 0.7;
  --opacity-hidden: 0;
  --transition-fast: 0.25s;

  /* Брейкпоинты Тильды: 1200, 960 (у меню 980), 640, 480.
     В условии @media переменные не работают, там числа пишутся прямо.
     980 — только шапка, остальные — содержимое страниц. */
}

/* Базовые стили документа */
*,
*::before,
*::after {
  /* Отступы и рамки входят в заданный размер блока */
  box-sizing: border-box;
}

body {
  margin: var(--space-0);
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-main);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

/* Контейнер: держит содержимое по центру и не даёт ему расползаться */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: var(--space-0) auto;
  padding: var(--space-0) var(--space-20);
}

/* Узкая колонка по центру: к ширине текста добавляются поля контейнера */
.container--narrow {
  max-width: calc(var(--column-narrow) + var(--space-20) * 2);
}

/* Текст среднего размера */
.text-md {
  margin: var(--space-0);
  font-size: var(--font-size-20);
}

/* Текст поменьше: описания, почта */
.text-sm {
  margin: var(--space-0);
  font-size: var(--font-size-18);
}

/* Заголовок блока */
.section-title {
  margin: var(--space-0);
  font-size: var(--font-size-42);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-title);
  text-align: center;
}

/* Ссылка в тексте: оранжевая, без подчёркивания */
.link {
  color: var(--color-link);
  text-decoration: none;
}

/* Ссылка цветом обычного текста: телефон, почта */
.link--text {
  color: var(--color-text);
}

/* header */
.header {
  /* Прибита к верху экрана и лежит поверх начала страницы, как на Тильде */
  position: fixed;
  top: var(--space-0);
  left: var(--space-0);
  z-index: var(--z-header);
  width: 100%;
  height: var(--header-height);
  background-color: var(--color-white);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.header__logo {
  color: var(--color-text);
  font-size: var(--font-size-24);
  text-decoration: none;
  white-space: nowrap;
}

.header__list {
  display: flex;
  gap: var(--space-32);
  margin: var(--space-0);
  padding: var(--space-0);
  list-style: none;
}

.header__link {
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}

/* Пункт текущей страницы чуть бледнее */
.header__link[aria-current="page"] {
  opacity: var(--opacity-active);
}

/* На десктопе бургера нет */
.header__burger {
  position: relative;
  display: none;
  width: var(--burger-width);
  height: var(--burger-height);
  padding: var(--space-0);
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.header__burger span {
  position: absolute;
  left: var(--space-0);
  width: 100%;
  height: var(--burger-line);
  background-color: var(--color-text);
  transition: top var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}

.header__burger span:nth-child(1) {
  top: var(--space-0);
}

.header__burger span:nth-child(2) {
  top: var(--burger-step);
}

.header__burger span:nth-child(3) {
  top: calc(var(--burger-step) * 2);
}

/* Меню открыто: крайние полоски сходятся в крестик, средняя гаснет */
.header--open .header__burger span:nth-child(1) {
  top: var(--burger-step);
  transform: rotate(var(--burger-angle));
}

.header--open .header__burger span:nth-child(2) {
  opacity: var(--opacity-hidden);
}

.header--open .header__burger span:nth-child(3) {
  top: var(--burger-step);
  transform: rotate(calc(var(--burger-angle) * -1));
}

/* footer */
.footer {
  border-top: var(--line-thin) solid var(--color-line-dark);
  background-color: var(--color-bg-dark);
}

.footer__inner {
  display: flex;
  align-items: center;
  height: var(--footer-height);
}

.footer__text {
  margin: var(--space-0);
  color: var(--color-white);
  font-size: var(--font-size-14);
}

/* requisites-text */
.requisites-text {
  /* Верхний отступ заодно освобождает место под прибитую шапку */
  padding: var(--space-120) var(--space-0) var(--space-60);
}

/* youtube-channels */
.channels {
  /* Верхний отступ заодно освобождает место под прибитую шапку.
     Нижний меньше верхнего: под таблицей сразу идёт блок контактов со своим отступом */
  padding: var(--space-152) var(--space-0) var(--space-88);
}

.channels__title {
  margin-bottom: var(--space-88);
}

/* Таблица каналов: название, подписчики, роль, описание */
.channels__table {
  width: 100%;
  border-collapse: collapse;
}

.channels__row {
  border-top: var(--line-thin) solid var(--color-gray);
}

.channels__row:last-child {
  border-bottom: var(--line-thin) solid var(--color-gray);
}

.channels__table th,
.channels__table td {
  padding: var(--space-24) var(--space-20) var(--space-24) var(--space-0);
  text-align: left;
  vertical-align: top;
}

.channels__table td:last-child {
  padding-right: var(--space-0);
}

.channels__name {
  width: var(--channels-col-name);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-name);
}

/* Аватарка и название канала в одну строку.
   Отрицательные поля приподнимают аватарку, чтобы название встало
   на одну линию с первой строкой соседних столбцов */
.channels__head {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin: calc(var(--space-12) * -1) var(--space-0);
}

.channels__avatar {
  flex-shrink: 0;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: var(--radius-round);
}

.channels__subs {
  width: var(--channels-col-subs);
  white-space: nowrap;
}

.channels__role {
  width: var(--channels-col-role);
}

/* contacts */
.contacts {
  padding: var(--space-44) var(--space-0) var(--space-32);
  text-align: center;
}

.contacts__title {
  margin: var(--space-0) var(--space-0) var(--space-44);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-title);
}

.contacts__phone {
  margin: var(--space-0) var(--space-0) var(--space-36);
  font-size: var(--font-size-26);
  line-height: var(--line-height-phone);
  overflow-wrap: break-word;
}

.contacts__socials {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin: var(--space-44) var(--space-0) var(--space-0);
  padding: var(--space-0);
  list-style: none;
}

.contacts__icon {
  display: block;
  width: var(--icon-size);
  height: var(--icon-size);
}

/* copter-photos */
.photos {
  /* Нижний отступ больше верхнего: туда выступает сдвинутое правое фото */
  padding: var(--space-140) var(--space-0) var(--space-156);
}

.photos__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-20);
}

.photos__item {
  display: block;
}

/* Правое фото сдвинуто вниз, место под ним не резервируется */
.photos__item--offset {
  position: relative;
  top: var(--space-64);
}

/* Горизонтальный снимок обрезается по бокам до вертикальной плитки */
.photos__img {
  display: block;
  width: 100%;
  aspect-ratio: var(--ratio-photo);
  object-fit: cover;
}

/* Увеличение фото: класс zoom на ссылке, слой создаёт скрипт */
.zoom {
  cursor: zoom-in;
}

.zoom-overlay {
  position: fixed;
  inset: var(--space-0);
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-20);
  background-color: var(--color-overlay);
  cursor: zoom-out;
}

.zoom-overlay[hidden] {
  display: none;
}

.zoom-overlay__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* copter-videos */
.videos {
  padding: var(--space-104) var(--space-0);
}

.videos__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-40);
}

.videos__frame {
  display: block;
  width: 100%;
  aspect-ratio: var(--ratio-video);
  border: none;
  background-color: var(--color-video-bg);
}

.videos__caption {
  margin-top: var(--space-20);
}

/* calculator */
.calc {
  /* Верхний отступ заодно освобождает место под прибитую шапку */
  padding: var(--space-120) var(--space-0) var(--space-32);
}

.calc__title {
  margin-bottom: var(--space-76);
}

.calc__group {
  margin-bottom: var(--space-24);
}

.calc__label {
  display: block;
  padding-bottom: var(--space-4);
}

.calc__input {
  display: block;
  width: 100%;
  height: var(--input-height);
  padding: var(--space-0) var(--space-20);
  border: var(--line-thin) solid var(--color-text);
  border-radius: var(--space-0);
  background-color: var(--color-white);
  color: var(--color-text);
  font-family: var(--font-main);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
}

.calc__result {
  margin: var(--space-0);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-name);
}

/* podcast-slider */
.slider {
  /* Верхний отступ заодно освобождает место под прибитую шапку */
  padding-top: var(--space-120);
}

/* Рамка кадра: от неё отсчитываются стрелки */
.slider__frame {
  position: relative;
  max-width: var(--slider-width);
  margin: var(--space-0) auto;
}

/* Лента: фото стоят в ряд, браузер примагничивает прокрутку к целому кадру */
.slider__track {
  display: flex;
  margin: var(--space-0);
  padding: var(--space-0);
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.slider__track::-webkit-scrollbar {
  display: none;
}

.slider__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.slider__img {
  display: block;
  width: 100%;
  aspect-ratio: var(--ratio-slide);
  object-fit: cover;
}

/* Стрелки стоят снаружи кадра, по середине его высоты */
.slider__arrow {
  position: absolute;
  top: calc(50% - var(--slider-arrow) / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--slider-arrow);
  height: var(--slider-arrow);
  padding: var(--space-0);
  border: none;
  border-radius: var(--radius-round);
  background-color: var(--color-arrow-bg);
  color: var(--color-text);
  cursor: pointer;
}

.slider__arrow--prev {
  left: calc((var(--slider-arrow) + var(--space-32)) * -1);
}

.slider__arrow--next {
  right: calc((var(--slider-arrow) + var(--space-32)) * -1);
}

.slider__chevron {
  width: var(--space-8);
}

.slider__arrow--prev .slider__chevron {
  transform: rotate(var(--angle-flip));
}

/* Точки создаёт скрипт, по одной на фото */
.slider__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-12);
  padding: var(--space-28) var(--space-0) var(--space-24);
}

.slider__dot {
  width: var(--space-8);
  height: var(--space-8);
  padding: var(--space-0);
  border: none;
  border-radius: var(--radius-round);
  background-color: var(--color-gray);
  cursor: pointer;
}

.slider__dot[aria-current="true"] {
  background-color: var(--color-dot-active);
}

/* podcast-telegram */
.tg__button {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--button-height);
  padding: var(--space-12);
  border-radius: var(--radius-button);
  background-color: var(--color-telegram);
  color: var(--color-white);
  font-weight: var(--font-weight-medium);
  text-align: center;
  text-decoration: none;
}

.tg__icon {
  flex-shrink: 0;
  width: var(--icon-size-button);
  height: var(--icon-size-button);
}

.tg__text {
  flex-grow: 1;
}

.tg__arrow {
  flex-shrink: 0;
  width: var(--space-12);
  margin-right: var(--space-8);
}

/* podcast-prices */
.cards {
  padding: var(--space-32) var(--space-0) var(--space-60);
}

.cards__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-40);
  margin: var(--space-0);
  padding: var(--space-0);
  list-style: none;
}

.card {
  padding: var(--space-32) var(--space-32) var(--space-40);
  border-radius: var(--radius-card);
  background-color: var(--color-bg-alt);
  box-shadow: var(--shadow-card);
}

.card__title {
  margin: var(--space-0) var(--space-0) var(--space-12);
  font-size: var(--font-size-22);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-name);
}

/* home-hero */
.hero {
  /* Верхний отступ: высота прибитой шапки плюс 32, чтобы фото было видно целиком */
  padding: var(--space-112) var(--space-0) var(--space-32);
}

.hero__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: var(--space-40);
}

.hero__img {
  display: block;
  width: 100%;
  aspect-ratio: var(--ratio-square);
  object-fit: cover;
}

.hero__text {
  text-align: center;
}

.hero__title {
  margin-bottom: var(--space-16);
}

.hero__lead {
  max-width: var(--hero-lead-width);
  margin: var(--space-0) auto;
}

/* Короткая серая черта между строкой и абзацами */
.hero__lead::after {
  content: "";
  display: block;
  width: var(--space-48);
  height: var(--space-4);
  margin: var(--space-28) auto var(--space-0);
  background-color: var(--color-divider);
}

.hero__descr {
  margin-top: var(--space-28);
}

/* home-works */
.works__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  gap: var(--space-40);
  padding-top: var(--space-32);
  padding-bottom: var(--space-16);
}

/* В разметке подпись всегда первая; здесь она уезжает вправо */
.works__row--reverse .works__text {
  order: 1;
}

/* home-videos: тот же ряд видео, что на Коптере, но ряды стоят вплотную */
.videos--tight {
  padding: var(--space-60) var(--space-0) var(--space-0);
}

.videos--tight .videos__row {
  row-gap: var(--space-0);
}

/* not-found */
.not-found {
  /* Верхний отступ заодно освобождает место под прибитую шапку */
  padding: var(--space-120) var(--space-0) var(--space-60);
  text-align: center;
}

.not-found__title {
  margin-bottom: var(--space-16);
}

.not-found__text {
  margin-bottom: var(--space-32);
}


/* Мобильные стили */
@media (max-width: 1200px) {
  .container {
    max-width: var(--container-mid);
  }

  /* Шапка не сужается вместе с содержимым */
  .header .container {
    max-width: var(--container-max);
  }

  .container--narrow {
    max-width: calc(var(--column-narrow-mid) + var(--space-20) * 2);
  }

  .text-md {
    font-size: var(--font-size-18);
  }

  .text-sm {
    font-size: var(--font-size-base);
  }

  .section-title {
    font-size: var(--font-size-38);
  }

  /* youtube-channels */
  .channels__name {
    width: var(--channels-col-name-mid);
    font-size: var(--font-size-18);
  }

  .channels__subs {
    width: var(--channels-col-subs-mid);
  }

  .channels__role {
    width: var(--channels-col-role-mid);
  }

  /* copter-videos */
  .videos__row {
    gap: var(--space-20);
  }

  /* calculator */
  .calc__result {
    font-size: var(--font-size-18);
  }

  /* podcast-slider */
  .slider__frame {
    max-width: var(--slider-width-mid);
  }

  /* home-hero */
  .hero__row {
    gap: var(--space-20);
  }

  .hero__lead {
    font-size: var(--font-size-14);
  }

  /* home-works */
  .works__row {
    gap: var(--space-20);
  }

  /* podcast-prices */
  .cards__list {
    gap: var(--space-20);
  }

  .card__title {
    font-size: var(--font-size-20);
  }

  /* footer */
  .footer__text {
    font-size: var(--font-size-12);
  }
}

@media (max-width: 980px) {
  /* header: полоса с логотипом и бургером, меню раскрывается под ней */
  .header {
    height: var(--header-height-mobile);
    background-color: var(--color-bg);
  }

  .header__burger {
    display: block;
  }

  .header__nav {
    position: absolute;
    top: 100%;
    left: var(--space-0);
    display: none;
    width: 100%;
    padding: var(--space-20) var(--space-0);
    background-color: var(--color-white);
  }

  .header--open .header__nav {
    display: block;
  }

  .header__list {
    display: block;
    text-align: center;
  }

  .header__link {
    display: block;
    padding: var(--space-12);
  }
}

@media (max-width: 960px) {
  .container,
  .container--narrow {
    max-width: var(--container-mobile);
  }

  /* youtube-channels */
  .channels__title {
    margin-bottom: var(--space-44);
  }

  /* Таблица превращается в карточки: ячейки строки идут друг под другом */
  .channels__table,
  .channels__table tbody,
  .channels__row,
  .channels__table th,
  .channels__table td {
    display: block;
    width: auto;
  }

  .channels__row {
    padding: var(--space-24) var(--space-0);
  }

  /* В карточке аватарку приподнимать не нужно */
  .channels__head {
    margin: var(--space-0);
  }

  .channels__table th,
  .channels__table td {
    padding: var(--space-0) var(--space-0) var(--space-8);
  }

  .channels__table td:last-child {
    padding-bottom: var(--space-0);
  }

  /* Пустая ячейка описания не занимает места */
  .channels__table td:empty {
    display: none;
  }

  /* copter-photos: фото друг под другом, по центру, без сдвига */
  .photos {
    padding: var(--space-132) var(--space-0) var(--space-144);
  }

  .photos__row {
    grid-template-columns: var(--photo-mobile-width);
    justify-content: center;
    gap: var(--space-12);
  }

  .photos__item--offset {
    top: var(--space-0);
  }

  /* copter-videos: видео друг под другом */
  .videos__row {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }

  /* calculator */
  .calc__title {
    margin-bottom: var(--space-44);
  }

  /* podcast-slider: кадр во всю ширину, стрелок нет — листают пальцем */
  .slider__frame {
    max-width: none;
  }

  .slider__arrow {
    display: none;
  }

  /* home-hero: фото над текстом */
  .hero {
    padding-top: var(--space-100);
  }

  .hero__row {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }

  /* home-works: подпись над своим видео */
  .works__row {
    grid-template-columns: 1fr;
  }

  .works__row--reverse .works__text {
    order: 0;
  }

  /* home-videos */
  .videos--tight .videos__row {
    row-gap: var(--space-20);
  }

  /* podcast-prices: карточки одной колонкой */
  .cards__list {
    grid-template-columns: 1fr;
  }

  .card {
    padding: var(--space-32);
  }
}

@media (max-width: 640px) {
  .text-md {
    font-size: var(--font-size-base);
    line-height: var(--line-height-tight);
  }

  .text-sm {
    font-size: var(--font-size-14);
    line-height: var(--line-height-tight);
  }

  .section-title {
    font-size: var(--font-size-30);
  }

  /* youtube-channels */
  .channels__name {
    font-size: var(--font-size-base);
  }

  /* copter-photos: фото во всю ширину */
  .photos__row {
    grid-template-columns: 1fr;
  }

  /* calculator */
  .calc__result {
    font-size: var(--font-size-base);
  }

  /* podcast-prices */
  .card__title {
    margin-bottom: var(--space-16);
    font-size: var(--font-size-18);
  }

  /* home-hero */
  .hero__lead {
    font-size: var(--font-size-12);
    line-height: var(--line-height-tight);
  }
}

@media (max-width: 480px) {
  /* requisites-text */
  .requisites-text {
    padding-top: var(--space-88);
  }

  /* youtube-channels */
  .channels {
    padding: var(--space-88) var(--space-0);
  }

  /* copter-photos */
  .photos {
    padding: var(--space-100) var(--space-0);
  }

  /* copter-videos */
  .videos {
    padding: var(--space-88) var(--space-0);
  }

  /* calculator */
  .calc {
    padding-top: var(--space-88);
  }

  /* podcast-slider */
  .slider {
    padding-top: var(--space-88);
  }

  /* home-videos */
  .videos--tight {
    padding: var(--space-60) var(--space-0) var(--space-0);
  }

  /* not-found */
  .not-found {
    padding-top: var(--space-88);
  }
}