@charset "UTF-8";

main {
    max-width: none;
    display: grid;
    grid-template-areas: 
    "h1 h1 h1"
    "piece1 piece2 piece3"
    "piece4 piece5 piece6";
    grid-template-columns: 400px 400px 400px;
    grid-column-gap: 2em;
}

h1 {
    grid-area: h1;
}


.content-image1 {
    grid-area: piece1;
}
.content-image1 img { 
 width: 400px;
 height: 400px;
}

.content-image2 {
    grid-area: piece2;
}
.content-image2 img{
    width: 400px;
    height: 400px;
}

.content-image3 {
    grid-area: piece3;
}
.content-image3 img{
    width: 400px;
    height: 400px;
}

.content-image4 {
    grid-area: piece4;
}
.content-image4 img{
    width: 400px;
    height: 400px;
}

.content-image5 {
    grid-area: piece5;
}
.content-image5 img{
    width: 400px;
    height: 400px;
}

.content-image6 {
    grid-area: piece6;
}
.content-image6 img{
    width: 400px;
    height: 400px;
}