.modal {
    display: block;
    position: fixed;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.2s, z-index 0s 0.2s;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    max-width: 100vw;
}

.modal>* {
    display: inline-block;
    white-space: normal;
    vertical-align: middle;
    text-align: left;
    max-width: 95vw;
}

.modal:before {
    display: inline-block;
    overflow: hidden;
    width: 0;
    height: 100%;
    vertical-align: middle;
    content: "";
}

.modal-visible .modal {
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.2s;
    max-width: 100%;
}

.modal-inner {
    position: relative;
    overflow: hidden;
    max-height: 90%;
    background: #fff;
    z-index: -1;
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.2s, transform 0.2s, z-index 0s 0.2s;
    border-radius: 6px;
    max-width: 100%;
}

.modal-visible .modal-inner {
    z-index: 100;
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.2s, transform 0.2s;
    max-width: 100%;
}

#modal-content {
    padding: 0px;
    max-width: 100%;
}

.modal-inner img {


    max-width: 100%;
}


/* Close button */
.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  border: none;
  background: #fff;
  padding: 4px;
  cursor: pointer;
  padding: 4px;
  border-radius: 999px;
}

.modal-close img {
  width: 24px;
  height: 24px;
  filter: grayscale(100%) brightness(50%); /* gray look */
  transition: filter 0.2s ease;
}

.modal-close:hover img {
  filter: none; /* restores original color if close.svg is colored */
  /* OR tint it orange-red if close.svg is monochrome */
  filter: invert(41%) sepia(92%) saturate(3284%) hue-rotate(358deg) brightness(97%) contrast(108%);
}