.overlay {
    opacity: 0;
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    z-index: 40;
    transition: .3s all;
}
.modal {
    opacity: 0;
    visibility: hidden;
    width: 100%;
    max-width: 560px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 50;
    box-shadow: 0 3px 10px -.5px rgba(0, 0, 0, .2);
    text-align: left;
    padding: 32px;
    border-radius: 16px;
    background-color: #fff;
    transition: 0.3s all;
    max-height: 90vh;
    overflow: auto;
}
.modal.active,
.overlay.active {
    opacity: 1;
    visibility: visible;
}
.modal__cross {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 18px;
    right: 18px;
    fill: #444;
    cursor: pointer;
}
.modal_text {
    margin-bottom: 24px;
    padding-right: 16px;
}
.modal_img img {
    width: 100%;
    height: auto;
}