.container {
  width: calc(100% - 48px);  /* повна ширина мінус відступи */
  height: calc(100vh - 64px); /* висота viewport мінус шапка */
  margin: 0 calc(var(--space-4) * 2);
  font-size: calc(var(--text-base) * 1.25);
}

/* Комбінування одиниць — тільки через calc! */
.element {
  width: calc(50% + 20px);  /* OK */
  /* width: 50% + 20px;  ПОМИЛКА */
}

clamp(мінімум, ідеальне, максимум) — адаптивні значення:
.hero-title {
  font-size: clamp(1.5rem, 5vw, 4rem);
  /* мін 24px, ідеально 5% ширини viewport, макс 64px */
}

.container {
  padding: clamp(16px, 4vw, 64px);
  max-width: min(1200px, 100% - 48px);
}

min() та max():
width: min(600px, 100%);
padding: max(16px, 3vw);

Сучасні псевдокласи:
:is(h1, h2, h3) { margin-top: 1.5em; }  /* те саме що h1, h2, h3 */
:where(header, footer) nav { gap: 24px; } /* не підвищує специфічність */
:has(img) { /* контейнер що містить img */ padding: 0; }
input:not([type="submit"]) { border: 1px solid var(--color-border); }

← Попередній урок Наступний урок →