/*** INDEX ***\

= EPISTLE

\*** END INDEX ***/

/*
//======================================================================
// EPISTLE
//======================================================================
*/

.epistle {
	margin: 61px auto 101px;
}

.epistle .inner {
	margin-right: -31px;
	display: grid;
	grid-template-columns: 31px 1fr 31px 60px 28.41%;
	grid-template-rows: 31px auto 31px;
}

.epistle .inner:before {
	content: '';
	background-color: #f0f0f0;
	background-color: var(--gray3, #f0f0f0);
	grid-column: 1/5;
	grid-row: 1/-1;
}

.epistle .inner .right {
	grid-column: 2/3;
	grid-row: 2/3;
	align-self: center;
	position: relative;
	z-index: 1;
}

.epistle .inner .left {
	grid-column: 4/-1;
	grid-row: 2/3;
	align-self: center;
	position: relative;
	z-index: 1;
	display: grid;
}

.epistle .inner .left > * {
	grid-area: 1/1/-1/-1;
}

.epistle .inner .left .overlay {
	background-color: #000;
	opacity: 0.5;
}

.epistle .inner .right .headline {
	font-size: 2.813em;
	font-size: var(--font45px, 2.813em);
	margin-bottom: 32px;
	font-weight: 700;
	font-weight: var(--fw700, 700);
}

.epistle .inner .right .description {
	line-height: 1.5;
	font-size: 1.938em;
	font-size: var(--font15px, 1.938em);
	margin-bottom: 32px;
}

.epistle .inner .right .link {
	background-color: #c0ea6a;
	background-color: var(--green, #c0ea6a);
	display: inline-flex;
	padding: 16px;
}

/*
//======================================================================
// EPISTLE - END
//======================================================================
*/

@media (max-width: 900px) {
	.epistle .inner {
		grid-template-columns: 1fr;
		grid-template-rows: unset;
		grid-gap: 15px;
		margin-right: unset;
	}

	.epistle .inner::before {
		display: none;
	}

	.epistle .inner .right,
	.epistle .inner .left {
		grid-column: unset;
		grid-row: unset;
	}
	
	.epistle .inner .right {
		order: 1;
	}
}