@layer layout {

  .section {
    position: relative;
    padding-block: var(--section-y, var(--section-md));
  }

  .section--lg { --section-y: var(--section-lg); }
  .section--sm { --section-y: var(--section-sm); }
  .section--raised { background-color: var(--bg-raised); }
  .section--deep { background-color: var(--bg-deep); }
  .section--hairline-top { border-block-start: var(--border-hair) solid var(--line-hairline); }


  .shell {
    --rail-w: var(--space-5);
    --rail-gap: var(--space-4);
    width: 100%;
    max-width: var(--shell-max, var(--container-base));
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    column-gap: var(--rail-gap);
    align-items: start;
  }

  .shell--wide { --shell-max: var(--container-wide); }
  .shell--narrow { --shell-max: var(--container-narrow); }
  .shell--text { --shell-max: var(--container-text); }


  .rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    align-self: stretch;
    min-height: var(--space-8);
  }

  .rail__index {
    font-family: var(--font-mono);
    font-size: var(--fs-overline);
    line-height: var(--lh-flat);
    letter-spacing: var(--track-wide);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
  }

  .rail__line {
    flex: 1;
    width: var(--border-hair);
    background-color: var(--line-hairline);
    transform-origin: top;
  }


  .shell--flush { --rail-w: 0px; --rail-gap: 0px; }
  .shell--flush > .rail { min-height: 0; }


  .grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
    column-gap: var(--grid-gap);
    row-gap: var(--row-gap, var(--space-7));
  }

  .grid--wide-gap { --grid-gap: var(--grid-gap-wide); }




  .band {
    position: relative;
    width: 100%;
  }



  @media (min-width: 480px) {
    .grid { --cols: 6; }
  }

  @media (min-width: 768px) {
    .grid { --cols: 8; }
    .shell {
      --rail-w: var(--space-7);
      --rail-gap: var(--space-5);
    }
  }

  @media (min-width: 1024px) {
    .grid { --cols: 12; }
  }
}

@layer utilities {

  .scroll-x {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
}