.blog-timeline-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}
.blog-timeline-wrapper .group-two{
	width: calc( 60% - 12px );
	display: flex;
    flex-direction: column;
    gap: 24px;
}
.blog-timeline-wrapper .group-two .timeline-content{
	width: 55%;
}
.blog-timeline-wrapper .group-two .timeline-image{
	width: 45%;
}
.blog-timeline-wrapper .group-single{
	width: calc( 40% - 12px );
}
.timeline-post {
	display: flex;
	gap: 20px;
	padding: 16px;
	background-color: #EDF4F2;
	border-radius: 32px;
	flex-grow: 1;
}
.blog-timeline-wrapper .group-single .timeline-post{
	flex-direction: column;
	height: 100%;
    justify-content: space-between;
	align-items: baseline;
}
.timeline-post.left { justify-content: flex-start; }
.timeline-post.right { justify-content: flex-end; width: 100%; }
.timeline-image{
	display: flex;
	border-radius: 16px;
	overflow: hidden;
	height: 100%;
}
.timeline-image img{
	object-fit: cover;
}
.timeline-date {
	font-weight: bold;
	color: #4E4E4E;
	font-weight: 400;
	font-size: 16px;
	line-height: 30px;
	display: flex;
    gap: 8px;
    align-items: center;
}
.timeline-post h3 {
	margin: 8px 0 16px;
	font-weight: 500;
	font-size: 24px;
	line-height: 36px;
	color: #353535;
}
.timeline-post p {
	font-weight: 400;
	font-size: 16px;
	line-height: 27px;
	color: #666666;
}
.timeline-post a.readmore {
	padding: 17px 32px;
	font-weight: 600;
	font-size: 16px;
	line-height: 22px;
	background-color: #068F5C;
	display: flex;
	gap: 12px;
	align-items: center;
	color: #fff;
	border-radius: 12px;
	width: fit-content;
	margin-top: 40px;
	transition: .3s all ease-in-out;
}
.timeline-post a.readmore:hover{
	background-color: #204185 !important;
}

@media screen and ( max-width: 1300px ){
    .blog-timeline-wrapper{
		flex-direction: column;
	}
	.blog-timeline-wrapper .group-two,
	.blog-timeline-wrapper .group-single{
		width: 100%;
	}
	.timeline-content,
	.timeline-image,
	.timeline-image img{
		width: 100%;
	}
	.timeline-post{
		padding: 20px;
	}
	.timeline-image{
		height: 100%;
	}
}
@media screen and ( max-width: 767px ){
	.timeline-post {
        flex-direction: column;
    }
	.blog-timeline-wrapper .group-two .timeline-content,
	.blog-timeline-wrapper .group-two .timeline-image{
		width: 100%;
	}
	.blog-timeline-wrapper{
		gap: 20px;
	}
}