@media screen and (max-width: 720px) {
    h1 {
        font-size: 7vw;
        text-align: center;
        color: aliceblue;
        grid-area: 1/1/1/6;
    }

    table {
        grid-area: 2/1/2/6;
        text-align: center;
        border-collapse: separate;
        border-spacing: 0 1vw;
        margin-bottom: 1.5vw;
    }

    .name {
        width: 25vw;
        font-size: 4vw;
        color: cyan;
    }

    figure {
        display: inline-block;
        width: 44vw;
        margin: 1vw;
        vertical-align: top;
    }

    figure img {
        width: 44vw;
    }

    figure figcaption {
        font-size: 4.5vw;
        margin-top: 1vh;
        color: aliceblue;
        text-align: center;
    }
}

@media screen and (min-width: 721px) {
    div {
        display: inline-block;
        text-align: center;
    }

    figure {
        display: inline-block;
        width: 17vw;
        margin: 1vw;
        vertical-align: top;
    }

    figure img {
        width: 17vw;
    }

    figure figcaption {
        font-size: 2vw;
        margin-top: 1vh;
        color: aliceblue;
        text-align: center;
    }

    body h1 {
        font-size: 2.25vw;
        text-align: center;
        color: aliceblue;
        grid-area: 1/1/1/10;
    }

    table {
        grid-area: 2/1/2/5;
        text-align: center;
        border-collapse: separate;
        border-spacing: 0 1vw;
        margin-bottom: 1.5vw;
    }

    .name {
        width: 25vw;
        font-size: 2vw;
        color: cyan;
    }
}