/* ==========================================================================
   Metamorph Pre School — Terms & Condition page
   Breakpoints: laptop <= 1366px, tablet <= 1024px, mobile <= 767px
   ========================================================================== */

/* ---------- Title banner (pulled up under the header, as on the original) ---------- */
.terms-hero {
	margin-top: -187px;
	background-color: #F3D1D1;
}

.terms-hero .page-hero__overlay {
	background-color: var(--accent-5);
	opacity: .5;
}

.terms-hero .page-hero__title {
	margin: 0;
	color: #0a303a;
	font-size: 60px;
}

/* ---------- Terms ---------- */
.terms {
	padding: 4% 0;
	background-color: #FFFFFF;
}

/* container + column + inner section + column paddings */
.terms__inner {
	padding: 20px 50px;
}

.terms__title {
	margin: 0 0 calc(1% + 20px);
	color: #0a303a;
	font-family: var(--font-display);
	font-size: 41px;
	font-weight: 800;
	line-height: 1.1em;
	letter-spacing: 3.4px;
}

.terms__text {
	display: flow-root;
	font-family: var(--font-text);
	font-size: 17px;
	line-height: 1.7em;
	text-align: justify;
}

.terms__text:not(:last-child) {
	margin-bottom: 20px;
}

.terms__text ol {
	margin: 0 1.5em .5em;
	padding: 0;
}

.terms__text p {
	margin: 0;
}

/* ==========================================================================
   RESPONSIVE — TABLET (<= 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
	.terms-hero {
		margin-top: 0;
	}

	.terms-hero .page-hero__title {
		line-height: 1.2em;
	}

	.terms__title {
		line-height: 1.2em;
	}
}

/* ==========================================================================
   RESPONSIVE — MOBILE (<= 767px)
   ========================================================================== */
@media (max-width: 767px) {
	.terms-hero .page-hero__title {
		font-size: 44px;
		line-height: 1.1em;
	}

	.terms__inner {
		padding: 20px 40px;
	}

	.terms__text {
		text-align: start;
	}
}