main {
    display: grid;

    grid-template-areas:
    "header header header"
    "embed coords coords"
    "poem bob bob"
    "flag meme movies";

    grid-template-columns: 2fr 2fr 1fr; /* 3 columns*/
    grid-template-rows: auto auto auto auto;
    gap: 1px; /* space between items*/
    max-width: 1200px;
    margin: 0 auto;
}

/* Areas on the grid */

#header {
    grid-area: header;
    text-align: center;
}

#embed {
    grid-area: embed;
}

.coords {
    grid-area: coords;
}

#poem {
    grid-area: poem;
    text-align: center;
}

#bob {
    grid-area: bob;
}

#flag {
    grid-area: flag;
}

.meme {
    grid-area: meme;
}


/* This made everything centered */

body {
    display: flex;
    justify-content: center;
}

/* This gave everything a border */

main > * {
    border: 1px solid black;
    padding: 10px;
}

/* Tried to fix the figcaption and figure*/

figure {
    border: 1px solid black;
    padding: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

figcaption {
    text-align: center;
    margin-top: 5px;
    font-size: 14.4px;
}

figure img {
    height: auto;
    width: 100%;
    object-fit: contain;
}


/* Image editing */
img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    margin-left: auto;
    margin-right: auto;
}