<div class="container">
  <h2>Background Content</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
</div>

<!--
  Note: The .overlay__backdrop element is only needed for static HTML demos using the `open` attribute.
  For production, open the dialog with JavaScript's showModal() and the ::backdrop pseudo-element
  will provide the blur effect automatically. The sibling element can be omitted.
-->
<div class="overlay__backdrop"></div>
<dialog class="overlay" open>
  <button class="overlay__close" onclick="this.closest('dialog').close()">
    <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect x="32" y="34" width="2" height="48" rx="1" transform="rotate(-45 32 34)" fill="#F2E5FF"/>
      <rect x="66" y="32" width="2" height="48" rx="1" transform="rotate(45 66 32)" fill="#F2E5FF"/>
    </svg>
  </button>
  <div class="overlay__content">
    <figure class="overlay__figure">
      <img class="overlay__image" src="https://picsum.photos/800/600" alt="Example landscape image">
      <figcaption class="overlay__caption">Eget nibh pretium ipsum auctor pharetra.</figcaption>
    </figure>
  </div>
</dialog>

.overlay {
  background: rgba(13, 0, 26, 0.70);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: grid;
  height: 100%;
  inset: 0;
  justify-items: center;
  max-height: 100%;
  max-width: 100%;
  padding: var(--root-gap);
  place-content: center;
  position: fixed;
  width: 100%;

  &::backdrop {
    backdrop-filter: blur(12px);
    background: rgba(13, 0, 26, 0.70);
  }

  &:not([open]) {
    display: none;
  }

  /**
   * Note: This sibling element is only needed for static HTML demos using the `open` attribute.
   * For production, use showModal() to open the dialog and the ::backdrop pseudo-element above
   * will provide the blur effect. The .overlay__backdrop element can be omitted.
   */
  &__backdrop {
    backdrop-filter: blur(12px);
    background: rgba(13, 0, 26, 0.70);
    inset: 0;
    position: fixed;

    &:not(:has(+ .overlay[open])) {
      display: none;
    }
  }

  &__close {
    appearance: none;
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
    height: 5.25rem;
    padding: 0;
    position: absolute;
    right: 1rem;
    top: 1rem;
    transition: opacity var(--root-ease-out-fast),
      transform var(--root-ease-out-fast);
    width: 5.25rem;
    z-index: 1;

    &:hover {
      opacity: 0.8;
      transform: scale(1.1);
    }
  }

  &__content {
    display: grid;
    gap: 1rem;
    justify-items: center;
    max-height: calc(100vh - var(--root-gap) * 2);
    max-width: min(90vw, 56rem);
  }

  &__figure {
    display: grid;
    gap: 1rem;
    justify-items: center;
    margin: 0;
  }

  &__image {
    border-radius: 0.25rem;
    box-shadow: var(--root-box-shadow-high);
    display: block;
    height: auto;
    max-height: calc(100vh - 8rem);
    max-width: 100%;
    object-fit: contain;
  }

  &__caption {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    text-align: center;
  }
}