/* Layout primitives. .frame centers content with the page margin; .grid is a 12-column grid
   (--cols to change it) whose children take .span-N. Below 720px every span is full width. */
@layer components {
  .frame {
    inline-size: 100%;
    max-inline-size: calc(var(--frame) + var(--margin) * 2);
    margin-inline: auto;
    padding-inline: var(--margin);
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    gap: var(--gutter);
  }

  .grid > * { grid-column: 1 / -1; }

  .span-1 { --span: 1; grid-column: span 1; }
  .span-2 { --span: 2; grid-column: span 2; }
  .span-3 { --span: 3; grid-column: span 3; }
  .span-4 { --span: 4; grid-column: span 4; }
  .span-5 { --span: 5; grid-column: span 5; }
  .span-6 { --span: 6; grid-column: span 6; }
  .span-7 { --span: 7; grid-column: span 7; }
  .span-8 { --span: 8; grid-column: span 8; }
  .span-9 { --span: 9; grid-column: span 9; }
  .span-10 { --span: 10; grid-column: span 10; }
  .span-11 { --span: 11; grid-column: span 11; }
  .span-12 { --span: 12; grid-column: span 12; }

  /* .start-N needs its .span-N on the same element: it reads --span */
  .start-2 { grid-column: 2 / span var(--span, 1); }
  .start-3 { grid-column: 3 / span var(--span, 1); }
  .start-4 { grid-column: 4 / span var(--span, 1); }
  .start-5 { grid-column: 5 / span var(--span, 1); }
  .start-6 { grid-column: 6 / span var(--span, 1); }
  .start-7 { grid-column: 7 / span var(--span, 1); }

  @media (max-width: 720px) {
    .grid > [class*="span-"] { grid-column: 1 / -1; }
  }

  .stack { display: flex; flex-direction: column; gap: var(--gap, var(--s3)); }
  .row { display: flex; align-items: center; gap: var(--gap, var(--s2)); }
  .push { margin-inline-start: auto; }
}