body {
font-family: system-ui, sans-serif;
font-size: 100%;
line-height: 144%;
margin: 0;
}
.grid-parent {
background-color: #ccffff;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 2em;
padding: 2em;
text-align: center;
}
h1{
font-size: 50px;
height: 50px;
background-color: dodgerblue;
text-align: center;
margin-top: 0;
margin-bottom: 0;
padding: 50px;
}
h2{
font-size: 40px;
height: 50px;
background-color: dodgerblue;
text-align: center;
margin-top: 0;
margin-bottom: 0;
padding: 0;
}
h3{
font-size: 28px;
}
.container {
display: flex;
background-color: DodgerBlue;
justify-content: space-around;
}
.container div {
background-color: #f1f1f1;
margin: 30px;
padding: 30px;
font-size: 40px;
align-items: center;
}
.item {
grid-column: initial;
}
.forth {
padding: 20px;
grid-column: 1 / span 3 ;
background-color: #ccccff;
}
.fifth {
padding: 20px;
grid-column: 1 / span 3 ;
background-color: #ffccff;
}
.six {
padding: 20px;
grid-column: 1 / span 3 ;
background-color: #ccffcc;
}
#img1{
transform: rotate(90deg);
}
#img2{
transform: rotate(90deg);
}
#img3{
transform: rotate(90deg);
}