.image-preview {
   position: fixed;
   z-index: 2;
   height: 100dvh;
   width: 100%;
   background: oklch(0.05 0.005 217 / 90%);
   color: white;
   padding: 16px;
   display: flex;
   flex-direction: column;
   align-items: end;
   gap: 16px;
   transition-duration: 200ms;
}

.image-preview__close {
   line-height: 1;
   font-size: 24px;
   transition-duration: 200ms;
   cursor: pointer;
}
.image-preview__close:hover {
   scale: 120%;
}

.image-preview__img-container {
   width: 100%;
   height: calc(100dvh - 16px * 2 - 16px * 2 - 24px - 38.25px);
   display: flex;
   align-items: center;
   justify-content: center;
}
.image-preview__img-container img {
   max-width: 100%;
   max-height: 100%;
   user-select: none;
   object-fit: contain;
   border-radius: 4px;
}

.image-preview__buttons {
   display: grid;
   grid-template-columns: auto 1fr;
   gap: 12px;
   width: 100%;
}
.image-preview__button {
   background: white;
   color: black;
   padding: 8px;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 16px;
   line-height: 1;
   border-radius: 4px;
   min-width: 38.25px;
}
.image-preview__button .bi {
   line-height: 1;
   font-size: 22px;
}

.image-preview__button_new-tab .image-preview__button-text {
   display: none;
}

@media only screen and (width >= 768px) {
   .image-preview__buttons {
      grid-template-columns: 40% 60%;
      width: 300px;
      margin-inline: auto;
   }
   .image-preview__button_new-tab .image-preview__button-text {
      display: block;
   }
}