@layer composition {
  .shell {
    inline-size: min(100% - 2 * var(--space-m), var(--width-max));
    margin-inline: auto;
  }

  .shell-wide {
    inline-size: min(100% - 2 * var(--space-s), 90rem);
    margin-inline: auto;
  }

  .region {
    padding-block: var(--space-2xl);
    position: relative;
  }

  .region-tight {
    padding-block: var(--space-xl);
  }

  main > .region + .region {
    border-block-start: 1px dashed var(--line-soft);
  }

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

  .stack-l {
    gap: var(--space-l);
  }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    align-items: center;
  }

  .grid-auto {
    display: grid;
    gap: var(--space-m);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  }

  .split {
    display: grid;
    gap: var(--space-xl);
    align-items: center;
  }

  @media (min-width: 60rem) {
    .split {
      grid-template-columns: 1.1fr 0.9fr;
    }
    .split[data-flip="true"] > :first-child {
      order: 2;
    }
  }

  .section-head {
    display: grid;
    gap: var(--space-s);
    max-inline-size: 52rem;
    margin-block-end: var(--space-xl);
  }

  .flow > * + * {
    margin-block-start: var(--space-s);
  }

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

  @media (min-width: 48rem) {
    .rail[data-cols="3"] {
      grid-template-columns: repeat(3, 1fr);
    }
    .rail[data-cols="2"] {
      grid-template-columns: repeat(2, 1fr);
    }
    .rail[data-cols="4"] {
      grid-template-columns: repeat(4, 1fr);
    }
  }
}