.l-shell {
  width: min(100% - (var(--page-gutter) * 2), var(--shell-width));
  margin-inline: auto;
}

.l-shell--wide {
  width: min(100% - (var(--page-gutter) * 2), var(--shell-width-wide));
  margin-inline: auto;
}

.l-shell--narrow {
  width: min(100% - (var(--page-gutter) * 2), var(--shell-width-narrow));
  margin-inline: auto;
}

.o-stack > * + * {
  margin-top: var(--stack-space, var(--space-5));
}

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

.o-grid {
  --grid-gap: var(--space-5);
  --grid-default-span: 12;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.o-grid > * {
  grid-column: span 12;
}

@media (min-width: 48rem) {
  .o-grid--span-3 > * { grid-column: span 3; }
  .o-grid--span-4 > * { grid-column: span 4; }
  .o-grid--span-5 > * { grid-column: span 5; }
  .o-grid--span-6 > * { grid-column: span 6; }
  .o-grid--span-7 > * { grid-column: span 7; }
  .o-grid--span-8 > * { grid-column: span 8; }
  .o-grid--span-9 > * { grid-column: span 9; }
  .o-grid--span-12 > * { grid-column: span 12; }

  .u-span-3 { grid-column: span 3 !important; }
  .u-span-4 { grid-column: span 4 !important; }
  .u-span-5 { grid-column: span 5 !important; }
  .u-span-6 { grid-column: span 6 !important; }
  .u-span-7 { grid-column: span 7 !important; }
  .u-span-8 { grid-column: span 8 !important; }
  .u-span-9 { grid-column: span 9 !important; }
  .u-span-12 { grid-column: span 12 !important; }
}

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

@media (min-width: 64rem) {
  .o-split {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
  }

  .o-split > :first-child { grid-column: span var(--split-a, 6); }
  .o-split > :last-child { grid-column: span var(--split-b, 6); }
  .o-split--reverse > :first-child { order: 2; }
  .o-split--reverse > :last-child { order: 1; }
}

.o-frame {
  aspect-ratio: var(--frame-ratio, 16 / 10);
  overflow: clip;
  border-radius: inherit;
}

.o-reel {
  display: grid;
  grid-auto-flow: column;
  gap: var(--reel-gap-mobile, var(--space-4));
  grid-auto-columns: calc((100% - ((var(--visible-mobile, 1.1) - 1) * var(--reel-gap-mobile, var(--space-4))) - var(--peek-mobile, 2.4rem)) / var(--visible-mobile, 1.1));
}

@media (min-width: 64rem) {
  .o-reel {
    gap: var(--reel-gap-desktop, var(--space-5));
    grid-auto-columns: calc((100% - ((var(--visible-desktop, 3) - 1) * var(--reel-gap-desktop, var(--space-5))) - var(--peek-desktop, 0rem)) / var(--visible-desktop, 3));
  }
}