.a2-photoView,
.a2-videoView {
    position                  : fixed;
    top                       : var(--a2-header-hight);
    bottom                    : 0;
    left                      : 0;
    right                     : 0;

    z-index                   : 5;

    background                : rgba(225, 225, 225, 0.85);

    opacity                   : 0;
    transition                : opacity .3s;

    pointer-events            : none;
}

.a2-photoView #a2-title-photo,
.a2-videoView #a2-title-video {
    font-size                 : 24px;
    font-weight               : bold;
    text-align                : center;
}

.a2-photoView #a2-mda_element,
.a2-videoView #a2-vdo_element {
    width                     : 100%;
    max-height                : calc(100% - var(--a2-header-hight) - 80px);

    object-fit                : contain;
}

.a2-photoView #a2-close-photo,
.a2-videoView #a2-close-video {
    position                  : absolute;
    top                       : 8px;
    right                     : 16px;

    font-size                 : 28px;

    cursor                    : pointer;
}

.a2-photoView #a2-close-photo:hover,
.a2-videoView #a2-close-video:hover {
    opacity                   : 0.5;
}

.a2-photoView.show,
.a2-videoView.show {
    opacity                   : 1;

    pointer-events            : visiblePainted;
}

.a2-photoView.hide, 
.a2-videoView.hide {
    opacity                   : 0;

    pointer-events            : none;
}