* { box-sizing: border-box; }
body { font-family: Arial, Helvetica, sans-serif; margin: 20px; display:flex; justify-content:center; }
.container { width: 900px; max-width:95%; }

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 220px;
        grid-template-rows: 100px 220px 360px auto;
    grid-template-areas:
        "title title title"
        "video video coords"
        "poem poem bob"
        "flag meme movies";
    border: 2px solid #999;
}
.grid > * { border: 1px solid #ccc; padding: 12px; }

.title { grid-area: title; text-align:center; font-weight:bold; font-size:24px; display:flex; align-items:center; justify-content:center; }
.video { grid-area: video; text-align:center; }
.coords { grid-area: coords; }
.poem { grid-area: poem; display:flex; align-items:center; justify-content:center; text-align:center; }
.bob { grid-area: bob; }
.flag { grid-area: flag; }
.meme { grid-area: meme; }
.movies { grid-area: movies; overflow:auto; }

.video iframe { width:100%; height:180px; }
figure img { max-width:100%; height:auto; display:block; }
@media (max-width: 700px) {
    .grid { grid-template-columns: 1fr; grid-template-areas: "title" "video" "coords" "poem" "bob" "flag" "meme" "movies"; }
    .video iframe { height:160px; }
}