.introduction { grid-area: introduction; }
.mission { grid-area: mission; }
.values { grid-area: values; }
.closing {grid-area: closing}
.image1 { grid-area: image1; }
.image2 { grid-area: image2; }
.image3 { grid-area: image3; }



@media (min-width: 800px){
    .our-story {
        display: grid;
        grid-template-areas: 
        'introduction introduction introduction'
        'mission mission values'
        'image3 image1 image1'
        'closing closing closing';
        gap: 20px;
        margin: 430px 30px 300px 30px;
    }
}

@media (max-width: 800px){
    .our-story {
        display: grid;
        grid-template-areas: 
        'introduction'
        'mission'
        'values'
        'image1'
        'image3'
        'closing';
        gap: 20px;
        margin: 430px 30px 300px 30px;
    }
}


.image1 img, .image2 img, .image3  img{
    display: flex;
    width: 100%;
    height: 100%;
}

.our-story > div{
    border: 4px solid pink;
    border-radius: 12px;
    padding: 20px;
}