.member-image-modal {
  box-sizing: border-box !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
  padding:
    max(12px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left)) !important;
  overflow: hidden !important;
  overscroll-behavior: contain;
}

.member-image-dialog {
  box-sizing: border-box !important;
  width: min(
    calc(100vw - 24px),
    426px,
    calc(177.777dvh - 42.666px)
  ) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100dvh - 24px) !important;
  aspect-ratio: 16 / 9 !important;
  flex: 0 1 auto !important;
}

.member-popup-image {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

@supports not (height: 100dvh) {
  .member-image-dialog {
    width: min(
      calc(100vw - 24px),
      426px,
      calc(177.777vh - 42.666px)
    ) !important;
    max-height: calc(100vh - 24px) !important;
  }
}

@media (max-width: 360px) {
  .member-image-close {
    top: 6px !important;
    right: 6px !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 21px !important;
    line-height: 25px !important;
  }
}