@media screen and (max-width:720px) {
    body {
        text-align: center;
    }

    .image {
        grid-area: 1/1/1/3;
    }

    .image img {
        max-width: 38vw;
        display: block;
    }

    h1 {
        color: aliceblue;
        text-align: center;
        font-size: 1.7vw;
    }

    h2 {
        color: aliceblue;
        text-align: center;
        font-size: 1.2vw;
    }

    p {
        font-size: 1.15vw;
        color: aliceblue;
    }

    .intro {
        grid-area: 1/3/1/6;
        padding: 0 0.5vw;
    }

    .paragraphs {
        margin-top: 2vw;
        grid-area: 2/1/2/6;
        border-top: 5px solid orangered;
    }

    .intro, .paragraphs {
        background-color: #222;
    }

    .paragraphs h1 {
        margin-top: 0;
        background-color: #333;
        padding: 1vw 0 1vw 0;
    }

    a {
        color:aliceblue;
    }
}
@media screen and (min-width:721px) {
    body {
        text-align: center;
    }

    .image {
        grid-area: 1/2/1/4;
    }

    .image img {
        max-width: 18vw;
        display: block;
    }

    h1 {
        color: aliceblue;
        text-align: center;
        font-size: 1.7vw;
    }

    h2 {
        color: aliceblue;
        text-align: center;
        font-size: 1.2vw;
    }

    p {
        font-size: 1.15vw;
        color: aliceblue;
    }

    .intro {
        grid-area: 1/4/1/10;
        padding: 0 0.5vw;
    }

    .paragraphs {
        margin-top: 2vw;
        grid-area: 2/2/2/10;
        border-top: 5px solid orangered;
    }

    .intro, .paragraphs {
        background-color: #222;
    }

    .paragraphs h1 {
        margin-top: 0;
        background-color: #333;
        padding: 1vw 0 1vw 0;
    }

    a {
        color:aliceblue;
    }
}