@charset "UTF-8";

.photo-modal {
  width: 100%;
  height: 100%;
  padding: var(--sp-spacing-16);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  overflow: auto
}

@media (min-width: 961px) {
  .photo-modal {
    padding: var(--sp-spacing-40)
  }
}

.photo-modal::-webkit-scrollbar {
  width: 6px
}

.photo-modal::-webkit-scrollbar-thumb {
  height: 50px;
  background: var(--clr-border-darkgray);
  border-radius: var(--rd-radius-full)
}

.photo-modal::-webkit-scrollbar-track {
  background: var(--clr-bg-palegray)
}

.photo-modal__image {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  min-width: 100%;
  min-height: 100%;
  display: none;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

.photo-modal__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover
}

.photo-modal__iframe {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-width: 100%;
  min-height: 100%;
  aspect-ratio: 16/9;
  display: none;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

.photo-modal__iframe iframe {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -o-object-fit: contain;
  object-fit: contain
}

.photo-modal__pagination {
  width: -webkit-fill-available;
  height: 48px;
  margin: 0 var(--sp-spacing-16) var(--sp-spacing-4);
  display: none;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff80
}

@media (min-width: 961px) {
  .photo-modal__pagination {
    margin: 0 var(--sp-spacing-40) var(--sp-spacing-8)
  }
}