.modal {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 99;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;
  padding-top: 5rem;
}
.modal-close {
  border: none;
  background-color: transparent;
  z-index: 9999;
  height: 50px;
  width: 50px;
  position: absolute;
  right: 10px;
  top: 10px;
  &::before,
  &::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    display: block;
    height: 100%;
    width: 1px;
    background-color: var(--wp--preset--color--white);
  }
  &::before {
    transform: rotate(45deg);
  }
  &::after {
    transform: rotate(-45deg);
  }
  @media (min-width: 1180px) {
    height: 90px;
    width: 90px;
    cursor: pointer;
  }
}

.translate-x-0 {
transform: translateX(0);
}
.translate-y-0 {
transform: translateY(0);
}
.-translate-x-full {
transform: translateX(-100%);
}
.-translate-y-full {
transform: translateY(-100%);
}