wrapper {
  display: none;
}

wrapper:first-of-type,
wrapper.main,
wrapper.mobile {
  display: flex;
}

@media screen and (max-width: 678px) {
  :root {
    --scale: 0.7;
  }

  parking words word {
    font-size: calc(var(--scale) * var(--wordScale) * 126%);
    padding-top: calc(var(--scale) * 5px);
    height: calc(var(--scale) * (var(--wordHeight) - 5px));
    width: calc(var(--scale) * var(--cardSize));
  }

  parking words word:nth-child(1) {
    rotate: 0deg;
  }

  parking words word:nth-child(2) {
    transform: translate(calc(var(--scale) * ((var(--cardSize) / 2) - (var(--wordHeight) / 2))), calc(var(--scale) * (-1 * (var(--cardSize) / 2) + calc(var(--defaultGap) * 1) - 5px)));
    rotate: 90deg;
  }

  parking words word:nth-child(3) {
    transform: translate(0, calc(var(--scale) * (-1 * (var(--cardSize)) / 1) + calc(var(--scale) * (var(--defaultGap) * 1.5))));
    rotate: 180deg;
  }

  parking words word:nth-child(4) {
    transform: translate(calc(var(--scale) * (-1 * (var(--cardSize) / 2) + calc(var(--defaultGap) * 1) - 5px)), calc(var(--scale) * (-1 * (var(--cardSize) / 2) + calc(var(--defaultGap) * 1) - 5px)));
    rotate: -90deg;
  }

  wrapper.mobile parking,
  .portrait wrapper.mobile parking {
    width: calc(100% - 100px);
    scale: 1;
    overflow-y: hidden;
    overflow-x: hidden;
    padding: 25px 50px 68px;
    justify-content: start;
    mask-image: linear-gradient(90deg, transparent 30px, red 50px, red calc(100% - 50px), transparent calc(100% - 30px));
  }

  wrapper.mobile parking::-webkit-scrollbar,
  .portrait wrapper.mobile parking::-webkit-scrollbar {
    display: none;
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-behavior: smooth;
  }

  .portrait wrapper.mobile,
  wrapper.mobile.extra,
  .portrait wrapper.mobile.extra {
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    height: auto;
    scale: 1;
  }

  .portrait wrapper.mobile button.scroller {
    display: flex;
  }

  .portrait wrapper.mobile parking spot {
    outline-width: 1px;
    width: calc(var(--scale) * var(--cardSize));
    height: calc(var(--scale) * var(--cardSize));
  }

  .portrait wrapper.mobile parking spot card,
  .portrait wrapper.mobile parking spot rotators {
    width: calc(var(--scale) * var(--cardSize));
    height: calc(var(--scale) * var(--cardSize));
  }

  .portrait wrapper.mobile parking spot rotators {
    display: flex;
  }

  .portrait wrapper.mobile parking spot rotators:last-of-type {
    transform: translateY(calc(var(--scale) * var(--cardSize)));
  }

  .portrait wrapper.mobile parking spot.empty,
  .portrait wrapper.mobile parking spot card {
    outline-width: 1px;
  }
}

@media screen and (max-height: 620px) {
  .portrait wrapper.mobile,
  wrapper.mobile.extra,
  .portrait wrapper.mobile.extra {
    height: calc(var(--cardSize) + 2 * var(--defaultGap));
  }
}