.donut1 {grid-area: donut1;}
.donut2 {grid-area: donut2;}
.donut3 {grid-area: donut3;}
.donut4 {grid-area: donut4;}
.intro {grid-area: intro1;}


@media (min-width: 800px){
    .content {
        display: grid;
        grid-template-areas: 
        'intro1 intro1 intro1 intro1'
        'donut1 donut2 donut3 donut4'; 
        gap: 20px;
        background-color: aqua;
        
    }
}

@media (max-width: 800px){
    .content {
        display: grid;
        grid-template-areas: 
        'intro1'
        'donut1'
        'donut2'
        'donut3'
        'donut4'; 
        gap: 20px;
        }
}

.content {
    margin: 20px;
    margin-top: 420px;
    margin-bottom: 400px;

    /* border: 4px solid pink; */
    border-radius: 12px;
    padding: 20px;
}


.donut1, .donut2, .donut3, .donut4, .intro {
    border: 4px solid pink;
    border-radius: 12px;
    padding: 20px;

}