:root {
  /* ======================================================
     SECTION – VERTICAL RHYTHM
     ====================================================== */

  /* Default section padding */
  --section-padding-mobile: 4rem; /* 64px */
  --section-padding-desktop: 6rem; /* 96px */

  /* Section variants (official only) */
  --section-padding-tight: 3rem; /* 48px */
  --section-padding-spacious: 7.5rem; /* 120px */

  /* ======================================================
     CONTAINER – WIDTH SYSTEM
     ====================================================== */

  /* Container max-widths */
  --container-width-default: 80rem; /* 1280px */
  --container-width-nav: 86.125rem; /* 1378px */
  --container-width-wide: 88.125rem; /* 1410px */
  --container-width-narrow: 64rem; /* 1024px (text-heavy, opsional) */

  /* ======================================================
     CONTAINER – HORIZONTAL PADDING
     ====================================================== */

  /* Side padding (gutters) */
  --container-padding-mobile: 1rem; /* 16px */
  --container-padding-tablet: 1.25rem; /* 20px */
  --container-padding-desktop: 1.5rem; /* 24px */

  /* Slide Gap */
  --slide-gap: clamp(16px, 5vw, 96px);
}

.section {
  padding-block: var(--section-padding-mobile);
  margin: 0 auto;
}

@media (min-width: 64rem) {
  .section {
    padding-block: var(--section-padding-desktop);
  }
}

.section--tight {
  padding-block: var(--section-padding-tight);
}

.section--spacious {
  padding-block: var(--section-padding-spacious);
}

.container {
  max-width: var(--container-width-default);
  margin-inline: auto;
  margin: 0 auto;
  /* padding-inline: var(--container-padding-mobile); */
}

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* gap: 24px; */
}

/* @media (min-width: 48rem) {
  .container {
    padding-inline: var(--container-padding-tablet);
  }
} */

/* @media (min-width: 64rem) {
  .container {
    padding-inline: var(--container-padding-desktop);
  }
} */

.container--wide {
  max-width: var(--container-width-wide);
}

.container--narrow {
  max-width: var(--container-width-narrow);
}