.intro {
    display: grid;
    column-gap: clamp(3em, 18%, 18%);
    grid-template-columns: 33% 1fr;
    grid-template-areas:
        "image ."
        "image .";
    margin-top: 10vh;
    max-width: 85%;
    min-height: 30em;
}

.intro img {
    grid-area: image;
    width: 100%;
    margin-top: 1em;
}

.intro p:first-of-type {
    margin-top: 0;
}

@media (max-width: 800px) {
    .intro {
        grid-template-columns: 1fr;
        grid-template-areas:
            "image"
            ".";
        row-gap: 2em;
        min-height: auto;
        max-width: 100%;
    }

    .intro img {
        max-width: 300px;
        margin: 0 auto;
    }
}