@layer components {

  /* The hero screenshot, large (site.js opens it on a click). */
  .lightbox {
    max-width: min(96vw, 1800px);
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
  }

  .lightbox::backdrop {
    background: color-mix(in oklch, var(--black) 78%, transparent);
    backdrop-filter: blur(8px);
  }

  .lightbox__close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    border: 0;
    background: none;
    color: var(--white);
    font-size: 2rem;
    cursor: pointer;
  }
}