/* Encorp Pacific (Canada) 2024 Site Design - Blog List CSS */
/* Last Updated: 2024.09.22 ET */
/* Used by: */
/* encp_homepage.css */
/* encp_sitepage.cfm */

ul.bloglist {
	position: relative;
	list-style: none;
	padding: 0;
	margin: 32px 0;
	display: grid;
	gap: 24px;
}

ul.bloglist > li {
	box-sizing: border-box;
	float: left;
	text-align: left;
	background-color: rgb(244,247,255);
	color: rgb(36,36,36);
	border: 1px solid rgb(179,195,227);
	border-radius: 8px;
	margin: 0;
	display: flex;
	flex-direction: column;
}

ul.bloglist div.thumbnail {
	width: 100%;
	height: 284px;
	background-size: cover;
	background-position: center center;
	border-radius: 8px 8px 0 0;
}

ul.bloglist div.info {
	margin: 24px;
	flex: 1 1 auto;
}

ul.bloglist div.headline {
	color: rgb(14,44,109);
	font-weight: 500;
	font-size: 32px;
	line-height: 1.07;
	letter-spacing: -0.03em;
	margin-bottom: 1rem;
}

ul.bloglist div.morelink {
	margin: 24px;
}

ul.bloglist div.morelink > a.button,
ul.bloglist div.morelink > a.button:visited {
	width: 100%;
	font-size: 18px;
	padding: 16px;
}

@media (min-width: 1001px) {

	ul.bloglist {
		grid-template-columns: repeat(auto-fill, minmax(calc(33% - 24px), 1fr));
	}

}		

@media (max-width: 1000px) {

	ul.bloglist div.headline {
		font-size: 24px;
	}

	ul.bloglist div.info,
	ul.bloglist div.morelink {
		margin: 24px 20px;
	}

}