#z {
    display: grid;
    grid-template-areas: 
        "a a a"
        "b c c"
        "b d e"
        "f f g"
        "f f h";
    /* sets up the size of the rows*/
    grid-template-rows: 20vmax 20vmax 20vmax 20vmax 20vmax;

    /* sets up the size of the columns */
    grid-template-columns: 20vmax 20vmax 20vmax;

    margin-left: 20%;
    margin-right: 20%;

    column-gap: 1px;
    row-gap: 1px;
}

#a {
    display: flex;
    grid-area: a;
    text-align: center;
    align-items: center;
    justify-content: center;
}

#b {
    grid-area: b;
}

#c {
    grid-area: c;
}

#d {
    grid-area: d;
}

#e {
    grid-area: e;
}

#f {
    grid-area: f;
}

#g {
    grid-area: g;
}

#h {
    grid-area: h;
}

/* makes every image fit inside its grid cell */
#z img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* makes the video fit inside its grid cell */
#c iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

#z > *{
    border: 1px solid black;

    /* keeps content from spilling out of the cell */
    overflow: hidden;
    min-width: 0;
    min-height: 0;
}