:root {
  /* Elements / Gap */
  --layout-elements-gap-tight: var(--space-2xs);
  --layout-elements-gap-cozy: var(--space-sm);
  --layout-elements-gap-loose: var(--space-md);

  /* Elements / Inset */
  --layout-elements-inset-dense: var(--space-3xs);
  --layout-elements-inset-compact: var(--space-2xs);
  --layout-elements-inset-tight: var(--space-xs);
  --layout-elements-inset-cozy: var(--space-sm);
  --layout-elements-inset-loose: var(--space-md);
  --layout-elements-inset-spacious: var(--space-lg);
  --layout-elements-inset-expanded: var(--space-2xl);

  /* Container */
  --layout-container-content: 1440px;
  --layout-container-reading: 720px;

  /* Section */
  --layout-section-x-spacing: var(--space-3xl);
  --layout-section-y-spacing: var(--space-6xl);
}

@media (max-width: 1024px) {
  :root {
    --layout-elements-inset-expanded: var(--space-xl);

    --layout-container-content: 672px;
    --layout-container-reading: 672px;

    --layout-section-x-spacing: var(--space-2xl);
    --layout-section-y-spacing: var(--space-4xl);
  }
}

@media (max-width: 768px) {
  :root {
    --layout-elements-gap-cozy: var(--space-xs);
    --layout-elements-gap-loose: var(--space-sm);

    --layout-elements-inset-loose: var(--space-sm);
    --layout-elements-inset-spacious: var(--space-md);
    --layout-elements-inset-expanded: var(--space-lg);

    --layout-container-content: 350px;
    --layout-container-reading: 350px;

    --layout-section-x-spacing: var(--space-md);
    --layout-section-y-spacing: var(--space-lg);
  }
}