.popup-dimmed {
  position: fixed;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-xl);
  width: 100vw;
  height: 100dvh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 50000;
}

.popup {
  width: 100%;
  overflow: hidden;
  border-radius: 1.5rem;
  background-color: var(--color-frame-primary);
  font-size: var(--font-body-medium-size);
  font-weight: var(--font-body-medium-m-weight);
  line-height: var(--font-body-medium-line-height);
  letter-spacing: var(--font-body-medium-letter-spacing);

  .popup__main {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 8rem;

    .popup__swiper {
      .swiper-button-prev,
      .swiper-button-next {
        bottom: 0rem;
        width: 2.4rem;
        height: 2.4rem;
        color: var(--color-icon-primary);
      }

      .swiper-button-disabled {
        color: var(--color-white);
      }

      .swiper-pagination-bullet {
        background-color: rgba(0, 0, 0, 0.5);
      }

      .swiper-pagination-bullet-active {
        background-color: var(--color-icon-primary);
      }
    }
  }

  .popup__btns {
    display: flex;
    border-top: 0.1rem solid var(--color-border-primary);

    .popup__btn {
      cursor: pointer;
      flex: 1;
      text-align: center;
      height: 4.8rem;
      border-right: 0.1rem solid var(--color-border-primary);
    }

    .popup__btn:last-child {
      border-right: none;
    }
  }
}

.popup--text {
  max-width: 32rem;
}

.popup--image,
.popup--swiper {
  max-width: 46.4rem;

  img {
    width: 100% !important;
  }
}

@media (orientation: landscape) and (max-height: 640px) {
  .popup--image,
  .popup--swiper {
    width: auto;
    height: 100%;
    max-height: 90dvh;

    .popup__main {
      height: calc(100% - 5rem);

      .popup__swiper {
        height: 100%;

        img {
          height: 100%;
        }
      }
    }
  }
}