.info-modal {
position: fixed;
display: flex;
top: 0;
left: 0;
z-index: 200;
width: fit-content;
height: fit-content;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
visibility: hidden;
transition-duration: .3s;
}
.info-modal::before {
position: fixed;
content: "";
display: block;
z-index: 199;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(50, 50, 50, .6);
transition-duration: .3s;
}
.info-modal__img {
width: fit-content;
height: fit-content;
max-width: calc(100vw - 30px);
max-height: calc(100vh - 90px);
object-fit: contain;
z-index: 201;
position: relative;
}
.info-modal__close {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 40px;
z-index: 202;
background: none;
border: none;
font-size: 53px;
line-height: 45px;
padding: 0;
font-weight: lighter;
color: #FFFFFF;
overflow: hidden;
text-align: center;
}
.info-modal.visible {
opacity: 1;
visibility: visible;
}