/* ══════════════════════════════════════════
   QURTÈN — Layout System
   ══════════════════════════════════════════ */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.375rem;
}

@media (min-width: 640px)  { .container { padding-inline: 2rem; } }
@media (min-width: 768px)  { .container { padding-inline: 2.75rem; } }
@media (min-width: 1280px) { .container { padding-inline: 4.5rem; } }
@media (min-width: 1440px) { .container { padding-inline: 5rem; } }

/* ── Section vertical rhythm ───────────── */
.section {
  padding-block: 5rem;
}

@media (min-width: 768px)  { .section { padding-block: 7rem; } }
@media (min-width: 1024px) { .section { padding-block: 9rem; } }