@media all {

  .page-popup {
    --padding: 1.25rem;
    --width: 40rem;
    position: fixed;
    inset: 0;
    z-index: 1000;
    padding: var(--padding);
    place-content: center;
    background-color: rgba(0,0,0,.25);
    backdrop-filter: blur(.5rem);
    cursor: pointer;
    display: none;
    overflow: scroll;

    &.visible {
      display: grid;
    }

    & .page-popup-content {
      position: relative;
      max-width: var(--width);
      padding: var(--padding);
      padding-bottom: 0;
      background-color: rgb(255,255,255);
      box-shadow: 0 0 2.5em rgba(0,0,0,.125);
      cursor: default;      
    }

    & .page-popup-close {
      justify-self: end;
      right: 0;
      z-index: 1;
      padding: calc(var(--padding) / 4);
      font-size: 2em;
      line-height: 1;
      height: 1em;
      aspect-ratio: 1;
      box-sizing: content-box;
      border: none;
      background: none ;
      display: grid;
      place-content: center;
      color: rgb(255,255,255);
      text-shadow: 0 0 1em rgba(0,0,0,.5);
      cursor: pointer;

      &:focus-visible ,
      &:hover {
        transform: scale(1.25);
      }
      
    }

  }
  
  html:has(.page-popup.visible) {
    overflow: clip;
  }

}

@media (min-width: 62.5rem) {

  .page-popup {
    --padding: 2.5rem;
    --width: 48rem;
  }

}

@media (min-width: 97.5rem) {

  .page-popup {
    --width: 52rem;
  }

}