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

  .flow > * + * {
    margin-top: var(--space-4);
  }

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

  /* Equal columns */
  .grid[data-columns="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid[data-columns="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Asymmetric 2-column layouts */
  .grid--2-1 {
    grid-template-columns: 2fr 1fr;
  }

  .grid--1-2 {
    grid-template-columns: 1fr 2fr;
  }

  /* 4-column layout */
  .grid--4-cols {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  @media (max-width: 768px) {
    .grid[data-columns="2"],
    .grid[data-columns="3"],
    .grid--2-1,
    .grid--1-2,
    .grid--4-cols {
      grid-template-columns: 1fr;
    }
  }
}