@layer layout {
  .container {
    width: 100%;
    max-width: var(--container-xl);
    margin-inline: auto;
    padding-inline: var(--space-md);

    @media (min-width: 640px) {
      padding-inline: var(--space-lg);
    }

    @media (min-width: 1024px) {
      padding-inline: var(--space-xl);
    }
  }

  .container--sm { max-width: var(--container-sm); }
  .container--md { max-width: var(--container-md); }
  .container--lg { max-width: var(--container-lg); }

  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, var(--space-md));
  }

  .stack--sm { --stack-gap: var(--space-sm); }
  .stack--lg { --stack-gap: var(--space-lg); }
  .stack--xl { --stack-gap: var(--space-xl); }

  .flex {
    display: flex;
    align-items: center;
    gap: var(--flex-gap, var(--space-md));
  }

  .flex--between {
    justify-content: space-between;
  }

  .flex--center {
    justify-content: center;
  }

  .flex--start {
    align-items: flex-start;
  }

  .flex--end {
    justify-content: flex-end;
  }

  .flex--wrap {
    flex-wrap: wrap;
  }

  .flex--sm { --flex-gap: var(--space-sm); }
  .flex--lg { --flex-gap: var(--space-lg); }

  .grid {
    display: grid;
    gap: var(--grid-gap, var(--space-md));
  }

  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid--responsive {
    grid-template-columns: 1fr;

    @media (min-width: 640px) {
      grid-template-columns: repeat(2, 1fr);
    }

    @media (min-width: 1024px) {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .main {
    padding-block: var(--space-lg);
  }

  .page {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
  }

  .center {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
  }

  .section {
    margin-block: var(--space-xl);
  }

  .divider {
    border-top: 1px solid var(--color-border);
    margin-block: var(--space-md);
  }
}