#introduction {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

#introduction img {
    width: 30vw;
    aspect-ratio: 1/1;
    object-fit: cover;
}

#introduction p {
    color: black;
    width: 40vw;   
    font-size: 1.2rem;
}

.grid {
    display: grid;
    grid-template: repeat(4, auto) / repeat(4, auto);
    row-gap: 2vh;
    column-gap: 2vw;
}

.grid figure {
    width: 22vw;
}

.grid img {
    height: auto;
    width: 22vw;
    border-radius: 16px;
}


@media only screen and (max-width: 700px) {
    #introduction {
        flex-direction: column;
        gap: 2vh;
    }

    #introduction img, #introduction figure {
        width: 70vw;
    } 
    
    #introduction p {
        width: 90vw;
    }

    .grid {
        grid-template: repeat(4, auto) / repeat(2, auto);
    }

    .grid figure {
        width: 40vw;
    }

    .grid img {
        width: 40vw;
    }
}