/* Базовые стили — мобильный */
.header {
  padding: 12px 16px;
  font-size: 1rem;
}

.nav-links {
  display: none; /* На мобильном скрыта */
}

.hamburger {
  display: block;
}

/* Планшет */
@media (min-width: 768px) {
  .header {
    padding: 16px 24px;
  }
}

/* Десктоп */
@media (min-width: 1024px) {
  .nav-links {
    display: flex;
    gap: 24px;
  }

  .hamburger {
    display: none;
  }
}

/* Базовые стили — десктоп */
.sidebar { width: 300px; float: left; }

/* «Ломаем» на планшетах */
@media (max-width: 1023px) {
  .sidebar { width: 200px; }
}

/* «Ломаем» ещё раз на мобильных */
@media (max-width: 767px) {
  .sidebar { width: 100%; float: none; }
}

/* clamp(минимум, предпочтительный, максимум) */
h1 {
  font-size: clamp(1.5rem, 4vw + 0.5rem, 3.5rem);
}

:root {
  /* Fluid шрифты */
  --text-sm:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-base: clamp(0.875rem, 0.8rem  + 0.4vw,  1rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.6vw,  1.375rem);
  --text-xl:   clamp(1.25rem,  1rem    + 1.2vw,  2rem);
  --text-2xl:  clamp(1.5rem,   1rem    + 2vw,    3rem);
  --text-3xl:  clamp(2rem,     1.2rem  + 3vw,    4rem);

  /* Fluid отступы */
  --space-sm:  clamp(0.5rem,  0.3rem + 1vw,  1rem);
  --space-md:  clamp(1rem,    0.5rem + 2vw,  2rem);
  --space-lg:  clamp(1.5rem,  0.5rem + 4vw,  4rem);
  --space-xl:  clamp(2rem,    1rem   + 5vw,  6rem);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
p  { font-size: var(--text-base); }
section { padding: var(--space-lg) var(--space-md); }

.hero {
  width: 100vw;   /* 100% ширины вьюпорта */
  height: 100vh;  /* 100% высоты вьюпорта */
}

.sidebar {
  width: 25vw;          /* 25% ширины */
  min-height: 100vh;
}

.text {
  font-size: 5vmin;  /* 5% от меньшей стороны вьюпорта */
}

/* Плохо: на мобильном элемент выше видимой области */
.fullscreen {
  height: 100vh;
}

/* Хорошо: новые динамические единицы */
.fullscreen {
  height: 100dvh;  /* Динамическая высота — учитывает состояние браузера */
}

/* Герой-секция занимает ровно видимую область на любом устройстве */
.hero {
  min-height: 100svh;  /* Гарантированно помещается на экране */
}

/* Фиксированная панель внизу */
.bottom-bar {
  position: fixed;
  bottom: 0;
  height: env(safe-area-inset-bottom, 0px); /* Учитывает «чёлку» iPhone */
}

<nav class="nav">
  <a href="/" class="nav-logo">Сайт</a>
  <button class="nav-toggle" aria-label="Меню">☰</button>
  <ul class="nav-links">
    <li><a href="/about">О нас</a></li>
    <li><a href="/services">Услуги</a></li>
    <li><a href="/contacts">Контакты</a></li>
  </ul>
</nav>

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
}

.nav-links {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-links.active {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 56px;
  left: 0;
  right: 0;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 16px;
  gap: 12px;
}

.nav-toggle {
  display: block;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

@media (min-width: 768px) {
  .nav-links {
    display: flex;
    flex-direction: row;
    position: static;
    background: none;
    box-shadow: none;
    padding: 0;
    gap: 24px;
  }

  .nav-toggle {
    display: none;
  }
}

.tabs {
  display: flex;
  overflow-x: auto;             /* На мобильном — горизонтальный скролл */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;        /* Прячем скроллбар */
  gap: 0;
}

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

.tab {
  flex-shrink: 0;               /* Не сжимаются */
  padding: 12px 20px;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .tabs {
    overflow-x: visible;        /* На десктопе всё видно */
    justify-content: center;
  }
}

/* Плохо: «iPhone 14 Pro Max» */
@media (max-width: 430px) { }

/* Хорошо: контент определяет брейкпоинт */
/* Смотришь, где макет «ломается» — ставишь брейкпоинт */
@media (min-width: 600px) { }   /* Контент перестаёт помещаться в одну колонку */
@media (min-width: 960px) { }   /* Хватает места для сайдбара */

/* Минимальный набор (2-3 брейкпоинта) */
:root {
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
}

/* Или используй Container Queries (CSS 2023+) */
@container (min-width: 400px) {
  .card { flex-direction: row; }
}

.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card {
    display: flex;
    flex-direction: row;
  }
  .card-image {
    width: 40%;
  }
}

@container card (max-width: 399px) {
  .card {
    display: flex;
    flex-direction: column;
  }
  .card-image {
    width: 100%;
  }
}

/* Плохо */
h1 { font-size: 48px; }
@media (max-width: 768px) { h1 { font-size: 24px; } }

/* Хорошо */
h1 { font-size: clamp(1.5rem, 4vw + 0.5rem, 3rem); }

/* Плохо: контент прячется за адресную строку */
.hero { height: 100vh; }

/* Хорошо */
.hero { min-height: 100dvh; }