.post-grid{
display: grid;
grid-gap: 25px;
grid-template-areas:
"h1 h1 h2 h3"
"h1 h1 h4 h5";
padding: 25px;
}
.post-item:first-child{
grid-area: h1;
}
.post-item:nth-child(2){
grid-area: h2;
}
.post-item:nth-child(3){
grid-area: h3;
}
.post-item:nth-child(4){
grid-area: h4;
}
.post-item:nth-child(5){
grid-area: h5;
}
.post-image{
background-image: url(https://upload.wikimedia.org/wikipedia/commons/3/36/La_vallata_di_Poggiorsini_vista_nel_dettaglio.jpg);
background-size: cover;
width:100%;
height:200px;
border-radius: 15px;
object-fit: cover;
flex-shrink: 0;
}
.post-image-large{
background-image: url(https://upload.wikimedia.org/wikipedia/commons/3/36/La_vallata_di_Poggiorsini_vista_nel_dettaglio.jpg);
background-size: cover;
width:100%;
height: 535px;
border-radius: 12px;
object-fit: cover;
flex-shrink: 0;
}
.post-content{
font-family: "Constantia", serif;
font-weight: 300;
padding: 25px 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.post-item{
display: flex;
flex-direction: column;
}
.post-title{
font-size: 25px;
font-weight: 600;
margin-bottom: 20px;
color: #ccc;
text-transform: uppercase;
}
@media screen and (max-width : 1172px){
.post-grid{
grid-template-areas:
"h1 h1 h1 h1"
"h2 h2 h3 h3"
"h4 h4 h5 h5";
}
}
@media screen and (max-width : 550px){
.post-grid{
grid-template-areas:
"h1 h1"
"h2 h2"
"h3 h3"
"h4 h4"
"h5 h5";
}
}