.c-article-content {
	position: relative;

	background-color: var(--color-white);

	@media (width > 768px) {
		margin-top: -80px;
	}

	.c-article-content__header {
		padding: var(--spacing-sm) 0;

		text-align: center;

		@media (width > 768px) {
			padding: var(--spacing-md);
		}
	}

	.c-article-content__content {
		margin: 0 auto;

		& > h1,
		& > h2,
		& > h3,
		& > h4,
		& > h5,
		& > h6,
		& > p,
		& > ul,
		& > ol {
			max-width: 660px;
			margin-right: auto;
			margin-left: auto;

			& > img {
				max-width: 100%;
				height: auto;
				margin-bottom: 1rem;
			}
		}

		h1,
		h2,
		h3,
		h4,
		h5,
		h6,
		p,
		li {
			> a {
				color: var(--color-secondary);
				font-weight: bold;

				&:hover,
				&:focus {
					text-decoration: underline;
					text-underline-offset: 2px;
				}
			}
		}

		blockquote {
			margin-bottom: var(--spacing-md);
			margin-left: -18px;
			padding-left: 33px;

			color: var(--color-primary);
			font-size: 1.25rem;
			font-weight: 700;

			@media (min-width: 992px) and (min-width: 1200px) {
				font-size: 2.5rem;
			}
			@media (min-width: 992px) {
				font-size: calc(1.375rem + 1.5vw);
			}

			.quote-author {
				display: block;

				font-size: 1.25rem;
				font-style: italic;

				&:before {
					content: "— ";
				}
			}
		}

		.text-image {
			display: flex;
			align-items: center;
			gap: var(--spacing-md);
			max-width: 770px;
			margin: 0 auto;

			@media (width <= 992px) {
				flex-direction: column;
			}
		}

		.text-image--left {
			@media (width > 992px) {
				flex-direction: row-reverse;
			}
		}

		.text-image__content {
			@media (width > 992px) {
				width: 30%;
			}
		}

		.text-image__image {
			display: flex;
			min-height: 520px;

			@media (width > 992px) {
				width: 70%;
			}

			img {
				width: 100%;
				height: auto;

				object-fit: cover;
			}
		}
	}
}