Thành viên:Nguyenhai314/Nguyenhai314-3/styles.css

.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";
	}
}