.posts-listing { 
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: var(--grey-50);
	padding: 70px 0 70px;
}

.posts-listing__wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	align-items: stretch;
		flex-direction: column;

}
.posts-listing__content {
	width: calc(100%);
	display: flex;
	flex-direction: column;
}
.posts-listing__content .content{
	text-align: center;
}
.posts-listing .heading {
	color: var(--grey-900);
	margin-bottom: 12px;
}

.posts-listing .heading .red-text{
	color: var(--primary-500);
}

.posts-listing .content p {
	margin-bottom: 24px;
}

.posts-listing__button {
	margin: 32px auto 0;
}

.posts-listing__button--mobile{
	display: none;
}


.posts-listing__container{
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 64px 24px;
	width: calc(100%);

}

.posts-listing__container article {
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: stretch;
	flex-direction: column;
	width: 100%;
	height: 100%;
	width: calc(100% / 3  - 16px);

}

.posts-listing__container article .posts-listing__content {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 0;
	height: 100%;
}
.posts-listing__content .button--ghost {
	width: fit-content;
}
.posts-listing__content__date-title {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.posts-listing__container .posts-listing__image {
	overflow: hidden;
}
.posts-listing__container .posts-listing__image,
.posts-listing__container .posts-listing__image a {
	width: 100%;
	display: flex;
	border-radius: 24px;
}


.posts-listing__container .posts-listing__image img {
	object-fit: cover;
	width: 100%;
	transition: transform var(--transition);
}
.posts-listing__container .posts-listing__image img,
.posts-listing__container .posts-listing__image,
.posts-listing__container .posts-listing__image a{
	height: 260px;
	    max-height: 260px;
		min-height: 260px;
}

.posts-listing__container .posts-listing__image img:hover{
	transform: scale(1.1);
}
.posts-listing__container .posts-listing__title,
.posts-listing__container .posts-listing__title a {
	font-size: 28px;
	line-height: 34px;
	font-family: var(--primary-font);
	font-weight: 700;
	color: var(--grey-900);
	margin: 0;
	transition: color var(--transition);
}

.posts-listing__container  .posts-listing__title:hover a {
	color: var(--primary-500) !important;
}

.posts-listing__container .posts-listing__date {
	color: var(--grey-500);
	font-size: 14px;
	font-weight: 500;
	line-height: 24px;
	margin: 0;
}

.posts-listing__container .posts-listing__excerpt {
	gap: 16px;
	color: var(--grey-500);
	font-size: 16px;
	font-weight: 400;
	flex: 1;
	hyphens: auto;
	margin-bottom: 24px;
	margin-top: 24px;
}

.posts-listing__container .posts-listing__excerpt p {
	margin: 0;
}

@media (max-width: 1600px) {


	.posts-listing__wrapper{
		gap: 16px;
		flex-direction: column;
	}
	.posts-listing__container{
		gap: 52px 16px;
		width: 100%;
	}
	.posts-listing__container article{
		width: calc(100% / 3 - 11px);
	}
	
	.posts-listing__content{
		width: 100%;
	}

	.posts-listing__button.posts-listing__button--dekstop{
		display: none;
	}

	.posts-listing__button.posts-listing__button--mobile{
		display: block;
		margin: 24px auto 0 ;
	}

	.posts-listing .heading, .posts-listing .content p, .posts-listing .content{
		text-align: center;
	}

	.posts-listing__container .posts-listing__title, .posts-listing__container .posts-listing__title a{
		font-size: 26px;
		line-height: 32px;
	}
	.posts-listing__container .posts-listing__image,
.posts-listing__container .posts-listing__image a,
.posts-listing__container .posts-listing__image img{
	height: 260px;
}
.posts-listing__container .posts-listing__title, .posts-listing__container .posts-listing__title a{
	font-size: 22px;
	line-height: 30px;
}
}


@media (max-width: 1400px) {
	.posts-listing__container .posts-listing__title, .posts-listing__container .posts-listing__title a{
		font-size: 24px;
		line-height: 30px;
	}
	.posts-listing__wrapper {
		flex-direction: column;
	}
	.posts-listing__wrapper__header {
		width: 100%;
	}
	.posts-listing__container {
		width: 100%;
		margin: 0 auto;
	}
	.posts-listing__buttons {
		flex-direction: row;
		justify-content: flex-start;
	}
	.posts-listing__wrapper{
		gap: 32px;
	}
}


@media (max-width: 1200px) {
	.posts-listing__container .posts-listing__title,
	.posts-listing__container .posts-listing__title a {
		font-size: 22px;
		line-height: 28px;
	}

	.posts-listing__container{
		gap: 48px 16px;
	}
	.posts-listing__container article{
		width: calc(100% / 3 - 11px);
	}
}
@media (max-width: 992px) {
	.posts-listing{
		padding: 50px 0 50px;
	}
	.posts-listing__container article {
		width: 100%;
		max-width: 700px;
		gap: 12px;
		min-width: unset;
	}
	.posts-listing__container {
		margin-top: 0;
		max-width: 500px;
		gap: 32px;
		justify-content: center;
	}

	.posts-listing__content__date-title {
		gap: 12px;
	}
	.posts-listing__image {
		display: flex;
		width: 100%;
	}
	.posts-listing__container .posts-listing__image img {
		height: 100%;
		width: 100%;
		max-height: 350px;
		min-height: 250px;
	}

	.posts-listing__container .posts-listing__image,
	.posts-listing__container .posts-listing__image a {
		height: auto;
	}
}

@media (max-width: 768px) {
	

	.posts-listing .heading {
		margin-bottom: 32px;
	}
	.posts-listing__container .posts-listing__image img{
		max-height: 280px;
	}
}

@media (max-width: 576px) {
	.posts-listing__container .posts-listing__image img{
		max-height: 280px;
        /* min-height: 289px; */
	}
	.posts-listing__wrapper{
		gap: 24px;
	}
	
}

@media (max-width: 410px) {
	.posts-listing__container .posts-listing__excerpt{
		word-break: break-all;
	}
}