.row * {
    box-sizing: border-box;
}

.row {
    display: -ms-flexbox;
    /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap;
    /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;
    max-width: 60%;
    margin: 0 auto;
}

.row>* {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
}

.row>img,
.row>iframe {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
}

.row-wide {
    max-width: 95%;
    margin: 16px auto;
    text-align: center
}

.row-wide>* {
    max-width: 100%;
    max-height: 100vh;
    -ms-flex: 100%;
    flex: 100%;
}

.row p, .row-wide p {
    padding-left: 12px;
    padding-right: 12px;
}

.row-wide>iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
}


.row>iframe {
    aspect-ratio: 16 / 9;
}

.row>iframe.yt-short,
.row>video.yt-short,
.row-wide>iframe.yt-short,
.row-wide>video.yt-short{
    aspect-ratio: 9 / 16;
}

.row>iframe.yt-square,
.row>video.yt-square,
.row-wide>iframe.yt-square,
.row-wide>video.yt-square{
    aspect-ratio: 1;
}


@media screen and (max-width: 800px) {
    .row {
        max-width: 95%;
    }

    .row>* {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }
}