.modal {
  height: 0;
  opacity: 0;
  overflow: hidden;
  position: static;
  transition: visibility 0s, height 0s, width 0s, opacity var(--transition__duration--default);
  visibility: hidden;
  width: 0;

  &\--is-open {
    align-items: center;
    background: #fff;
    display: flex;
    flex-flow: column nowrap;
    height: 100vh;
    justify-content: center;
    left: 0;
    opacity: 1;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    position: fixed;
    top: 0;
    visibility: visible;
    width: 100vw;
    z-index: 1005;
  }

  &\__content {
    max-height: 100vh;
    order: 2;

    @media (--fluid) {
      margin: 1em;
      order: 1;
    }
    @media (--fluid-landscape) {
      max-height: 100vh;
      width: 50vh;
    }
  }

  &\__button {
    &\--close {
      margin-bottom: 4.5em;
      order: 1;

      @media (--fluid) {
        margin: 4em 0 0;
        order: 2;
      }
    }
  }
}