/* POST */

.POST {
	margin: 0 auto;
	
}

.POST .background {
    position: absolute;
    top: -50%;
    left: 50%;
    width: var(--page-width);
    bottom: 50%;
    transform: translate(-50%,0);
    background: linear-gradient(0deg, #FFF 0%, #FFF 100%), #F6F6F4;
    overflow: hidden;
}

.POST .background::before {
	content: '';
	position: absolute;
	filter: blur(150px);
	top: 0;
	left: 50%;
	width: var(--page-width);
	bottom: 50%;
	transform: translate(-50%,0);
	background: linear-gradient(180deg, #FFF9F2 26%, #FFD7B0 40%);
}

.POST .title {
	position: relative;
	margin-bottom: var(--s7);
}

.POST .meta {
	position: relative;
	margin-bottom: var(--s7);
	display: flex;
	justify-content: space-between;
}

.POST .meta.alt-flex-end  {
	justify-content: flex-end;
}

.POST .meta .tags {
	display: flex;
	gap: var(--s1);
	align-items: center;
	flex: 0 0 auto;
}


.POST .meta .tags span {
	border: 1px solid var(--green-400);
	padding: var(--s1) var(--s2);
	border-radius: var(--s1);
	color: var(--navy);
	font-weight: 600;
}

.POST .share {
	display: flex;
	gap: var(--s1);
	align-items: center;
	flex: 0 0 auto;
	justify-content: flex-end;
}

.POST .share .alt-bottom {
	max-width: var(--col-8);
	margin: 0 auto;
	justify-content: flex-end;
}

.POST .share .socials {
	display: flex;
	gap: var(--s1);
	align-items: center;
}

.POST .share .socials a svg path {
	transition: fill 0.25s;
}

.POST .share .socials a:hover svg path {
	fill: var(--navy)
}

.POST .image {
	position: relative;
	margin-bottom: var(--s4);
	border-radius: var(--s1);
	overflow: hidden;
}

.POST .featured-post {
	position: relative;
	margin-bottom: var(--s4);
	border-radius: var(--s1);
	overflow: hidden;
}

.POST .featured-post-content {
	background: var(--white);
	padding: var(--s5);
	width: var(--col-4);
	border-radius: var(--s1);
	position: absolute;
	top: var(--s5);
	left: var(--s5);
	z-index: 2;
	min-height: 480rem;
}

.POST .featured-post-content .meta {
	display: flex;
	gap: var(--s1);
	align-items: center;
	margin-bottom: 0;
}

.POST .featured-post-content .meta .categories {
	background: var(--orange);
	padding: var(--s1) var(--s2);
	border-radius: var(--s1);
	color: var(--white);
	font-weight: 600;
}

.POST .featured-post-content .meta .time-to-read {
	border: 1px solid var(--green-400);
	padding: var(--s1) var(--s2);
	border-radius: var(--s1);
	color: var(--navy);
	font-weight: 600;
}

.POST .featured-post-content h1 {
	margin: var(--s3) 0;
}

.POST .featured-post-content .excerpt {
	margin: 0;
}

@media (width <= 960px) {
	.POST .featured-post-content {
		position: static;
		background: transparent;
		padding: var(--s4) 0;
		width: auto;
		min-height: auto;
	}
	.POST .featured-post .meta {flex-direction: row;}
}

.POST .content {
	position: relative;
	max-width: var(--col-8);
	margin: 0 auto var(--s9);
}

@media (width > 960px) {
	.POST .content .b-img-container {max-width: var(--col-6); margin: var(--s7) auto;}
}

@media (width <= 960px) {
	.POST .title {margin-bottom: var(--s4);}
	.POST .meta {margin-bottom: var(--s5); flex-direction: column; align-items: flex-start; gap: var(--s2);}
	.POST .image {margin-bottom: var(--s5);}
	.POST .content {margin-bottom: var(--s5);}
}