.swiper {
   width: 100vw;
   height: 100vh;
}
.swiper .swiper-slide {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
}
.swiper img {
   width: 100%;
   max-width: 1024px;
   display: block;
   aspect-ratio: 1/1;
}
.mates .swiper img {
   max-width: 832px;
   aspect-ratio: 832/1171;
}

.noscroll {
   overflow-y: hidden;
}

.backdrop {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   background-color: rgba(0, 0, 0, 0.92);
   cursor: pointer;
   z-index: 1;
}
.backdrop * {
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
}

.popup__wrapper {
   max-width: 100vw;
   max-height: 100%;
   height: 100%;
   aspect-ratio: 1/1;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   cursor: pointer;
}

.popup {
   position: relative;
   aspect-ratio: 1/1;
   width: 1024px;
   max-width: 100vw;
   max-height: 100vh;
   border-radius: 4px;
   cursor: -webkit-grab;
   cursor: grab;
}

.popup img {
   width: 100%;
   height: 100%;
   display: block;
   border-radius: 4px;
   aspect-ratio: 1/1;
}

.popup__close {
   position: absolute;
   top: 15px;
   right: 15px;
   width: 50px;
   height: 50px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   border-radius: 4px;
   -webkit-transition: background-color 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out;
   cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
   .popup__close:hover {
      background-color: rgba(0, 0, 0, 0.52);
   }
}
.popup__close svg {
   width: 25px;
   height: 25px;
   fill: white;
}

.popup__navigation {
   position: absolute;
   bottom: 15px;
   left: 0;
   width: 100%;
   padding: 0 15px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
}

.popup__navigation__arrow {
   -ms-flex-item-align: end;
       align-self: flex-end;
   width: 50px;
   height: 50px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   background-color: transparent;
   border-radius: 4px;
   -webkit-transition: background-color 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out;
   cursor: pointer;
}
.popup__navigation__arrow.--left svg {
   margin-left: -5px;
}
.popup__navigation__arrow.--right svg {
   margin-right: -5px;
}
@media (hover: hover) and (pointer: fine) {
   .popup__navigation__arrow:hover {
      background-color: rgba(0, 0, 0, 0.52);
   }
}
.popup__navigation__arrow svg {
   width: 20px;
   fill: white;
}

.v-enter-active,
.v-leave-active {
   -webkit-transition: opacity 0.5s ease;
   transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
   opacity: 0;
}

.content__cover-img-wrapper {
   position: relative;
}
.content__cover-glass {
   position: absolute;
   bottom: 10px;
   right: 14px;
   cursor: pointer;
}
.content__cover-glass svg {
   width: 25px;
   height: 25px;
   fill: white;
}
.content__cover-desc {
   cursor: pointer;
}