@layer pages {
  .labs.full {
    grid-column: full;
    padding-inline: var(--gutter);
    display: grid;
    gap: var(--space-6);
    justify-items: center;
  }

  .labs.full > * { width: min(100%, 1100px); }

  .labs-header {
    max-width: var(--content-width);
    display: grid;
    gap: var(--space-2);
  }

  .labs-header h1 {
    font-size: var(--text-2xl);
  }

  .labs-header h2 {
    font-size: var(--text-xl);
  }

  .labs-header .lede {
    color: var(--color-fg-muted);
    line-height: var(--leading-relaxed);
  }

  .labs-item {
    display: grid;
    gap: var(--space-2);
    justify-items: center;
    width: 100%;
    margin-top: var(--space-8);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border-subtle);
  }

  .labs-item:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .labs-frame {
    margin-top: var(--space-4);
    width: 100%;
    aspect-ratio: 16 / 10;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--color-bg-elevated);
  }

  .labs-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }

  .labs .caption {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-fg-subtle);
    max-width: var(--content-width);
  }

  @media (max-width: 720px) {
    .labs-frame { aspect-ratio: 4 / 5; }
  }
}