body {
    display:flex;
    justify-content: center;
    align-items: center;
    min-height:100vh;
    margin:0;
    font-family: arial, sans-serif;
}

.grid-container {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: 
     "title title title"
     "video video coords"
     "poem poem bob"
     "poem poem movies"
     "flag meme movies";
    gap: 2px;
    width:90%;
    max-width: 1200px;
    box-sizing: border-box;
    background:#333;
    padding:2px;
}

.grid-container > div {
    background:#fff;
    padding:12px;
    box-sizing: border-box;
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
}

.title { 
    grid-area: title; display:flex; justify-content: center; align-items: center;}
.video {
    grid-area:video
}
.coords {
    grid-area: coords;
}
.poem {
    grid-area: poem;
}
.bob {
    grid-area: bob;
}
.flag {
    grid-area: flag;
}
.meme {
    grid-area: meme;
}
.movies {
    grid-area: movies;
}

.grid-container img,
.grid-container iframe {
    width:100%;
    display:block;
    border:0;
}

.video iframe {
    height: 100%;
    min-height: 180px;
}

.coords figure,
.meme figure {
    display:flex;
    flex-direction: column;
    height:100%;
}

.coords img,
.meme img,
.bob img,
.flag img {
    flex:1 1 auto;
    object-fit:cover;
    height:100%;
}

.flag, .meme, .movies {
    width:100%;
}

.title span {
    font-size: 2em;
    font-weight: 700;
    text-align: center;
}