@layer composition {
  .wrap {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--space-m);
  }

  .wrap[data-width="narrow"] {
    max-width: var(--content-narrow);
  }

  .wrap[data-width="wide"] {
    max-width: 96rem;
  }

  .band {
    padding-block: var(--space-2xl);
  }

  .band[data-padding="tight"] {
    padding-block: var(--space-xl);
  }

  .band[data-padding="loose"] {
    padding-block: var(--space-3xl);
  }

  .band[data-surface="dark"] {
    background: var(--surface-dark);
    color: var(--text-inverse);
  }

  .band[data-surface="dark"] a {
    color: var(--text-inverse);
  }

  .band[data-surface="concrete"] {
    background: var(--surface-concrete);
    color: var(--text-primary);
  }

  .band[data-surface="paper"] {
    background: var(--surface-page);
  }

  .stack {
    display: flex;
    flex-direction: column;
  }

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

  .stack[data-gap="xs"] > * + * {
    margin-top: var(--space-xs);
  }

  .stack[data-gap="s"] > * + * {
    margin-top: var(--space-s);
  }

  .stack[data-gap="l"] > * + * {
    margin-top: var(--space-l);
  }

  .stack[data-gap="xl"] > * + * {
    margin-top: var(--space-xl);
  }

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

  .cluster[data-gap="xs"] {
    gap: var(--space-2xs);
  }

  .cluster[data-justify="between"] {
    justify-content: space-between;
  }

  .cluster[data-justify="center"] {
    justify-content: center;
  }

  .cluster[data-spacing="section"] {
    margin-top: var(--space-l);
  }

  .cluster[data-spacing="section-lg"] {
    margin-top: var(--space-xl);
  }

  .switcher[data-spacing="section"] {
    margin-top: var(--space-l);
  }

  .grid-editorial {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-m);
  }

  @media (min-width: 48rem) {
    .grid-editorial {
      grid-template-columns: repeat(12, 1fr);
      gap: var(--space-l);
    }
  }

  .region {
    grid-column: 1 / -1;
  }

  @container style(--enable: true) {
    .region {
      grid-column: 1 / -1;
    }
  }

  @media (min-width: 48rem) {
    .region[data-span="7"] {
      grid-column: 1 / span 7;
    }

    .region[data-span="5"] {
      grid-column: 8 / span 5;
    }

    .region[data-span="6"] {
      grid-column: span 6;
    }

    .region[data-span="4"] {
      grid-column: span 4;
    }

    .region[data-span="8"] {
      grid-column: span 8;
    }

    .region[data-offset-2] {
      grid-column-start: 3;
    }
  }

  .switcher {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-m);
  }

  .switcher > * {
    flex-grow: 1;
    flex-basis: calc((32rem - 100%) * 999);
  }

  .frame {
    position: relative;
    aspect-ratio: var(--frame-ratio, 4 / 3);
    overflow: hidden;
  }

  .frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .frame[data-ratio="square"] {
    --frame-ratio: 1 / 1;
  }

  .frame[data-ratio="tall"] {
    --frame-ratio: 3 / 4;
  }

  .frame[data-ratio="wide"] {
    --frame-ratio: 16 / 9;
  }

  .frame[data-ratio="banner"] {
    --frame-ratio: 21 / 8;
  }

  .container-query-unit {
    container-type: inline-size;
  }
}