.POST {
	display: flex;
	justify-content: space-between;
}

.POST article {
	width: var(--col-9);
	padding-right: 16rem;
	box-sizing: border-box;
}

.POST aside {
	width: var(--col-3);
	position: relative;
	z-index: 1;
}

.POST .meta {
	margin-bottom: 48rem;
	position: relative;
	z-index: 1;
}

.POST .meta h1 {
	margin-top: 8rem;
}

.POST .media {
	position: relative;
	margin: 0 0 48rem 104rem;
	z-index: 1;
}

.POST .media button {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	border-radius: 16rem;
	border: none;
	text-indent: -9999rem;
	cursor: pointer;
	padding: 0;
}

.POST .media button::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 96rem;
	height: 96rem;
	border-radius: 100%;
	background: var(--primary-orange) url(../../assets/images/ui-play.svg) no-repeat center / 48rem 48rem;
	transform: translate(-50%, -50%);
	transition: background-color 0.25s;
}

.POST .media button:hover::after {
	background-color: var(--white);
}

.POST .image {
	overflow: hidden;
	border-radius: 16rem;
}

.POST .share {
	position: absolute;
	top: 0;
	left: -104rem;
}

.POST .share a {
	display: block;
	width: 24rem;
	height: 24rem;
	margin-bottom: 48rem;
	text-indent: -9999rem;
	color: var(--dark-navy);
}

.POST .share a:last-child {
	margin-bottom: 0;
}

.POST .share a:hover {
	color: var(--green);
}

.POST .type {
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	background: var(--dark-navy);
	color: var(--white);
	font-weight: 600;
	font-size: 16rem;
	padding: 6rem 16rem;
	border-radius: 16rem 0 16rem 0;
}

.POST .categories {
	color: var(--green);
	font-weight: 600;
	font-size: 16rem;
	display: inline-block;
	vertical-align: top;
}

.POST .date {
	color: var(--dark-grey);
	font-size: 16rem;
	display: inline-block;
	vertical-align: top;
}

.POST .date::before {
	content: '•';
	padding: 0 8rem;
}

.POST .categories:empty + .date::before {
	content: '';
}

.POST .content {
	position: relative;
	margin-left: 104rem;
}

.POST .content h2 {
	font-size: 42rem;
}

.POST .content img {
	border-radius: 16rem;
}

.POST .content iframe {
	margin: 32rem 0;
}

.POST .content a:not(.b-button) {
	text-decoration: underline;
}

.POST .content[data-empty] {
	padding: 0 !important;
	margin-bottom: -128rem;
}

.POST .latest-posts .b-h6 {
	text-transform: uppercase;
	font-size: 14rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	color: var(--dark-grey);
	margin-bottom: 8rem;
}

.POST .latest-posts ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.POST .latest-posts li {
	border-top: 1rem solid var(--grey);
	padding-top: 24rem;
	margin-top: 24rem;
}

.POST .latest-posts .b-h4 {
	font-weight: 600;
	font-size: 16rem;
	margin: 0;
}

.POST .latest-posts .b-h4 a:hover {
	color: var(--green);
}

.POST .latest-posts .categories {
	margin-bottom: 4rem;
}

.POST .form {
	background: var(--light-grey);
	padding: 48rem;
	border-radius: 16rem;
}

.POST .form h3 {
	margin-bottom: 32rem;
}

.POST .event-details {
	background: var(--light-grey);
	padding: 48rem;
	border-radius: 16rem;
}

.POST .event-details .row {
	margin: 32rem 0;
	min-height: 64rem;
}

.POST .event-details .icon {
	width: 64rem;
	height: 64rem;
	float: left;
	margin: 0 24rem 0 0;
}

.POST .event-details .label {
	font-size: 16rem;
	font-weight: 600;
	padding-top: 4rem;
}

.POST .event-details .value {
	margin: 0;
}

.POST .event-details .b-button {
	margin-top: 16rem;
}

@media screen and (max-width: 960px) {
	.POST[data-variant="0"] aside {display: none;}

	.POST[data-variant="0"] aside[data-sidebar-variant="3"] {display: block; position: relative; padding-bottom: 32rem; margin-bottom: -64rem;}
	.POST[data-variant="0"] aside[data-sidebar-variant="3"] .sidebar-content {position: relative;}
	.POST[data-variant="0"] aside[data-sidebar-variant="3"]::before {
		content: '';
		position: absolute;
		content: '';
		display: block;
		top: 0;
		bottom: 0;
		left: -999rem;
		right: -999rem;
		background: var(--light-grey);
	}

	.POST .content h2 {font-size: 22rem;}
	.POST .content[data-empty] {margin-bottom: -64rem;}
}



/* expanded sidebar */

.POST[data-variant="expanded-sidebar"] article {width: var(--col-6);}
.POST[data-variant="expanded-sidebar"] aside {width: var(--col-6);}
.POST[data-variant="expanded-sidebar"] .media {margin-left: 0;}
.POST[data-variant="expanded-sidebar"] .content {margin-left: 0;}
.POST[data-variant="expanded-sidebar"] .share {display: none;}

@media screen and (max-width: 960px) {
	.POST[data-variant] {flex-wrap: wrap;}
	.POST[data-variant] article {width: 100%; padding-right: 0;}
	.POST[data-variant] aside {width: 100%; margin-top: 64rem;}

	.POST .content {margin-left: 0;}
	.POST .meta {margin-bottom: 32rem;}
	.POST .meta h1 {margin-top: 12rem;}
	.POST .categories {display: block; font-size: 14rem;}
	.POST .date {display: block; font-size: 14rem;}
	.POST .date::before {display: none;}
	.POST .media {margin: 0 0 32rem 0;}
	.POST .media button::after {width: 64rem; height: 64rem;}
	.POST .share {display: none;}
	.POST .content {margin-top: 0;}
	.POST .form {padding: 24rem;}
	.POST .event-details {padding: 24rem;}
	.POST .event-details .icon {margin-right: 16rem;}

	.POST .event-details .row {margin: 24rem 0;}
	.POST .event-details .label {padding-top: 8rem;}
	.POST .event-details .b-button {margin: 0;}
}



/* two tone background */

.b-page-body > .b-section:first-child > .b-frame > .POST[data-variant="0"]:first-child .media {margin-bottom: 64rem;}
.b-page-body > .b-section:first-child > .b-frame > .POST[data-variant="0"]:first-child .content {padding-top: 64rem;}
.b-page-body > .b-section:first-child > .b-frame > .POST[data-variant="0"]:first-child .content::after {
	position: absolute;
	content: '';
	display: block;
	bottom: 100%;
	left: -999rem;
	right: -999rem;
	height: 9999rem;
	background: var(--light-grey);
}

@media screen and (max-width: 960px) {
	.b-page-body > .b-section:first-child > .b-frame > .POST[data-variant="0"]:first-child .media {margin-bottom: 32rem;}
	.b-page-body > .b-section:first-child > .b-frame > .POST[data-variant="0"]:first-child .content {padding-top: 32rem;}
}