.posts-section {
	background-color: var(--color-surface);
	padding: 100px 0px 100px 0px;
}

.posts-header {
	text-align: center;
	font-size: 32px;
	font-weight: 600;
	color: var(--color-navy-blue);
	line-height: 1.2;
}

.posts-text {
	margin-top: 10px;
	margin: auto;
	text-align: center;
	font-size: 16px;
	font-weight: 500;
	color: var(--color-navy-blue);
	max-width: 750px;
}

.post-thumbnail {
	width: 100%;
	height:300px;
	object-fit: cover;
	object-position: center;
	display: block;
}

.post-title {
	margin-top: 10px;
	height: 2em;
	font-size: 20px;
	font-weight: 700;
	color: var(--color-navy-blue);
}

.post-article {
	margin-top: 10px;
	height: 6em;
	font-size: 15px;
	font-weight: 500;
	color: var(--color-dark-gray);
}

.post-button {
	margin-top: 10px;
	padding: 10px 25px 10px 25px;
	border: solid var(--color-turquoise) 2px;
	background-color: var(--color-white);
	color: var(--color-turquoise);
	text-decoration: none;
	font-size: 15px;
	font-weight: 700;
	border-radius: 5px;
}

.post-button:hover {
	background-color: var(--color-turquoise);
	color: var(--color-white);
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
}


@media screen and (max-width: 1400px) {



	.post-article {
		height: 8em;
	
	}

}

@media screen and (max-width: 1200px) {

	.post-title {
		height: 3em;
	}

	.post-article {
		height: 10em;
	
	}

}


@media screen and (max-width: 992px) {

	.post-title {
		height: 4em;
	}

	.post-article {
		height: 14em;
	
	}

}



@media screen and (max-width: 768px) {
  	
	.srif-mainpage-hero__eyebrow {
		font-size: 15px;
	}

	.srif-mainpage-hero__title {
		font-size: 30px;
	}


	.srif-mainpage-hero__description {
		font-size: 15px;
	}



	.post-title {
		height: 3em;
	}

	.post-article {
		height: 8em;
	
	}

}

@media screen and (max-width: 576px) {


	.post-title {
		height: 4em;
	}

	.post-article {
		height: 12em;
	
	}

}