@layer components {
  .lightbox {
    --speed: 150ms;
    background-color: oklch(var(--lch-ink) / 0.33);
    block-size: 100dvh;
    border: 0;
    inline-size: 100dvw;
    inset: 0;
    margin: auto;
    max-block-size: unset;
    max-inline-size: unset;
    overflow: hidden;
    padding: var(--block-space-half) var(--inline-space);

    &[open] {
      display: grid;
      opacity: 1;
      place-items: center;
    }

    figure {
      grid-area: 1 / 1;
    }
  }

  .lightbox__btn,
  .lightbox__next-btn,
  .lightbox__previous-btn {
    grid-area: 1/1;
    align-self: start;
    justify-self: end;
  }

  .lightbox__next-btn {
    align-self: center;
  }

  .lightbox__previous-btn {
    align-self: center;
    justify-self: start;
  }

  .lightbox__image {
    grid-area: 1/1;
    max-inline-size: calc(100dvw - (var(--inline-space) * 12));
    max-block-size: calc(100dvh - (var(--block-space) * 12));
  }
}
