/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 04 2023 | 16:47:42 */
/* Grid style */

#recent-post .display-posts-listing.grid {
	display: grid;
	grid-gap: 16px;
}

#recent-post .listing-item {
	display: grid;
	grid-template:
		'title title title'
		'date date date'
		'author category category'
		'excerpt excerpt excerpt';
	grid-template-rows: 3rem 2rem 2.5rem 6rem;
	
}

#recent-post .display-posts-listing.grid .title {
	grid-area: title;
	display: block;
	font-size: 2rem;
	font-weight: bold;
	color: #5C5C5C;
}

#recent-post .display-posts-listing.grid .image { 
	grid-area: image;
	display: block;
	width: 10rem;
}

#recent-post .display-posts-listing.grid .author {
	grid-area: author;
	display: block;
}

#recent-post .display-posts-listing.grid .date {
	grid-area: date;
	font-size: 1rem;
	color: #5C5C5C;
}

#recent-post .display-posts-listing.grid .category-display {
	grid-area: category;
	display: block;
}

#recent-post .display-posts-listing.grid .excerpt { 
	grid-area: excerpt;
	display: block; 
	max-width: 100%; 
	height: auto; 
	margin-top: .5rem;
}

@media (min-width: 600px) {
	#recent-post .display-posts-listing.grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media (min-width: 1024px) {
	#recent-post .display-posts-listing.grid {
		grid-template-columns: repeat( 3, 1fr );
	}
}