/* ========================================= 
	Page
========================================= */

.vi-page {
	padding: 7rem 20px 3rem;
}

.vi-page .vi-page__container {
	max-width: 1366px;
	margin: 0 auto;
}

.vi-page .vi-page__header {
	margin-bottom: 1.5rem;
}

.vi-page .vi-page__title {
	color: var(--vi-title-color);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
}

.vi-page .vi-page__content {
	color: var(--vi-text-color);
	line-height: 1.6;
}

.vi-page .vi-page__content > * + * {
	margin-top: 1rem;
}

.vi-page .vi-page__content :where(h1, h2, h3, h4, h5, h6) {
	margin-top: 2rem;
	margin-bottom: 1rem;
	color: var(--vi-title-color);
	font-weight: 700;
	line-height: 1.25;
}

.vi-page .vi-page__content :where(h1) {
	font-size: 32px;
}

.vi-page .vi-page__content :where(h2) {
	font-size: 22px;
}

.vi-page .vi-page__content :where(h3) {
	font-size: 22px;
}

.vi-page .vi-page__content :where(h4) {
	font-size: 20px;
}

.vi-page .vi-page__content :where(h5) {
	font-size: 18px;
}

.vi-page .vi-page__content :where(h6) {
	font-size: 16px;
}

.vi-page .vi-page__content :where(ul, ol) {
	padding-left: 1.5rem;
}

.vi-page .vi-page__content :where(li) {
	margin-bottom: 0.5rem;
}

.vi-page .vi-page__content a {
	color: var(--vi-accent-color);
	text-decoration: underline;
}

.vi-page .vi-page__content a:hover {
	text-decoration: none;
}

.vi-page .vi-page__content hr {
	border: none;
	border-top: 1px solid #e3e3e3;
	margin: 2rem 0;
}

@media (min-width: 768px) {
	.vi-page {
		padding: 10rem 20px 3.5rem;
	}

	.vi-page .vi-page__title {
		font-size: 40px;
	}

	.vi-page .vi-page__content :where(h1) {
		font-size: 40px;
	}

	.vi-page .vi-page__content :where(h2) {
		font-size: 30px;
	}

	.vi-page .vi-page__content :where(h3) {
		font-size: 28px;
	}

	.vi-page .vi-page__content :where(h4) {
		font-size: 26px;
	}

	.vi-page .vi-page__content :where(h5) {
		font-size: 24px;
	}

	.vi-page .vi-page__content :where(h6) {
		font-size: 22px;
	}
}

@media (min-width: 1025px) {
	.vi-page .vi-page__title {
		font-size: 50px;
	}

	.vi-page .vi-page__content :where(h1) {
		font-size: 50px;
	}

	.vi-page .vi-page__content :where(h2) {
		font-size: 36px;
	}

	.vi-page .vi-page__content :where(h3) {
		font-size: 34px;
	}

	.vi-page .vi-page__content :where(h4) {
		font-size: 32px;
	}

	.vi-page .vi-page__content :where(h5) {
		font-size: 30px;
	}

	.vi-page .vi-page__content :where(h6) {
		font-size: 28px;
	}

}