.gallery_container {

    width: 100%;

}

.max_media_container {

    width: 100%;

    display: grid;

}



.max_media_container > figure {

    text-align: center;

    position: relative;

    padding: 0.5vw

}

.max_media_container > div {

    padding: 0.5vw;

    text-align: center;

}

.max_media_container > div > a {

    text-decoration: none;

    position: relative;

    top: 50%;

    transform: translate(0, -50%);

    color: black;

}

.max_media_container > div > a::before {

    display: block;

    color: #3498db;

    font-size: 10vw;

}

.max_media_container > div > a:hover::before {

    text-shadow: 0 0 0.5vw navy;

}

.max_media_container > figure > img, .max_media_container > figure > video {

    max-width: 100%;

    max-height: 100%;

    position: relative;

    top: 50%;

    transform: translate(0, -50%);

    cursor: pointer;

}

.max_media_container > figure > video {

    opacity: 0.6;

}

.max_media_container > figure > img:hover, .max_media_container > figure > video:hover {

    box-shadow: 0.5vw 0.5vw 1vw black;

}

.max_media_container > figure[class="fas fa-play-circle"]::before {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    font-size: 5vw;

}

.msg_box {

    position: fixed;

    top: 0;

    width: 100%;

    height: 100vh;

    background: black;

    z-index: 3;

    box-sizing: border-box;

    padding: 2vw;

}

.msg_box > figure {

    width: 100%;

    height: 100%;

    position: relative;

}

.msg_box > figure > img, .msg_box > figure > video {

    max-width: 100%;

    max-height: 100%;

    position: relative;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 0;

}

.msg_box > figure > i {

    position: absolute;

    color: white;

    font-size: 7vw;

    cursor: pointer;

    z-index: 1;

}

.msg_box > figure > i:nth-of-type(1) {

    left: 2vw;

    top: 50%;

    transform: translate(0, -50%);

}

.msg_box > figure > i:nth-of-type(2) {

    right: 2vw;

    top: 50%;

    transform: translate(0, -50%);

}

.msg_box > figure > i:last-of-type {

    top: 0;

    right: 0;

}

.msg_box > figure > i:hover {

    text-shadow: 0vw 0vw 1vw white;

}





@media screen and (min-aspect-ratio: 6/5) {

    .max_media_container {

        grid-template-columns: auto auto auto auto;

    }

    .max_media_container > * {

        height: 15vw;

    }

    .max_media_container > div > a {

        font-size: 3vw;

    }

}

@media screen and (max-aspect-ratio: 6/5) {

    .max_media_container {

        grid-template-columns: auto auto;

    }

    .max_media_container > * {

        height: 30vw;

    }

    .max_media_container > div > a {

        font-size: 6vw;

    }

}