slide-deck.css

slide-deck {
  --gap: clamp(8px, 0.25em + 1vw, 16px);
  --default-slide-border: thin solid gray;
  container: slide-deck slide / inline-size;
  display: grid;
}

[slide-view=grid],
[slide-view=speaker] {
  --slide-ratio: 16/9;
  --target-margin: var(--gap);
  --target-outline: medium dotted;
  --target-outline-offset: calc(var(--gap) * 0.5);
  gap: var(--row-gap, var(--gap)) var(--column-gap, var(--gap));
  padding: var(--gap);
}

[slide-view=grid] {
  --slide-canvas-border: var(--default-slide-border);
  --slide-note-margin-block: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(min(50ch, 100%), 1fr));
}

[slide-view=slideshow] {
  grid-auto-rows: 100svh;

  [slide-item='container'] {
    display: grid;
  }

  [slide-canvas] {
    border-block-end: var(--default-slide-border);
  }

  [slide-note] {
    display: none;
  }
}

[slide-view=speaker] {
  --slide-canvas-border: var(--default-slide-border);
  --column-gap: calc(1.25em + 2vw);
  --row-gap: 5em;
  display: grid;

  @media (width >= 60em) {
    grid-template-columns: minmax(30vw, auto) minmax(65vw, 1fr);
  }

  [slide-item='container'] {
    align-items: center;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
  }

  [slide-canvas] {
    grid-column: 1;
  }

  [slide-note] {
    font-size: var(--note-font-size, 120%);
    grid-column: 2;
    max-width: 75ch;
    padding-inline: var(--gap);
  }

  [slide-item]:target {
    --note-font-size: 160%;
  }
}

[slide-item] {
  scroll-margin-block: var(--target-margin);
}

[slide-canvas] {
  aspect-ratio: var(--slide-ratio);
  border: var(--slide-canvas-border);
  container: slide / inline-size;
  padding: var(--gap);

  &:where([aria-current='true']),
  &:where([slide-item][aria-current='true'] *) {
    outline: var(--target-outline);
    outline-offset: var(--target-outline-offset);
  }
}

[slide-note] {
  margin-block: var(--slide-note-margin-block);
}