<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 class="actions">
    <button class="button" @click="$refs.overlay.showModal()">Open Overlay</button>
  </div>
</div>

<dialog class="overlay" ref="overlay">
  <button class="overlay__close" aria-label="Close" @click="$refs.overlay.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: rgb(13 0 26 / 0.7);
  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: rgb(13 0 26 / 0.7);
  }

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

  &__close {
    appearance: none;
    background: transparent;
    border: 0;
    color: #ffffff;
    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: rgb(255 255 255 / 0.9);
    font-size: 1rem;
    text-align: center;
  }
}