:root {
  --container: min(100% - 32px, 1180px);
  --container-narrow: min(100% - 32px, 860px);
  --section-sm: clamp(3rem, 7vw, 6rem);
  --section-md: clamp(4.5rem, 9vw, 8.5rem);
  --section-lg: clamp(5.5rem, 12vw, 11rem);
  --radius-sm: 0.55rem;
  --radius-md: 0.9rem;
  --radius-lg: 1.4rem;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-ui: cubic-bezier(0.32, 0.72, 0, 1);
}

.ali-container {
  width: var(--container);
  margin-inline: auto;
}

.ali-container--narrow {
  width: var(--container-narrow);
  margin-inline: auto;
}

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

.ali-section--deep {
  padding-block: var(--section-lg);
}

.ali-section--compact {
  padding-block: var(--section-sm);
}

@media (min-width: 900px) {
  :root {
    --container: min(100% - 64px, 1240px);
    --container-narrow: min(100% - 64px, 900px);
  }
}