// ============================================================================
// :: CONTENT
// ============================================================================
.m-content {
	font-family: $font-family-roboto;
	font-weight: $font-weight-thin;
	font-size: $font-size;
	line-height: 2.3rem;

	color: $text-color;

	strong {
		font-weight: 700;
	}

	h5 + * {
		margin-top: 5rem;
	}

	p:first-child {

		strong {
			font-family: $font-family-beausans;
			font-weight: $font-weight-bold;
			font-size: $font-size-1x-large;
			line-height: $line-height-2x-large;

			color: $text-color;

			@include respond-to($screen-small-base) {
				font-size: $font-size;
			}
		}
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {

		& + p {
			margin-top: 2rem;
		}
	}

	p {

		& + h1,
		& + h2,
		& + h3,
		& + h4,
		& + h5,
		& + h6 {
			margin-top: 4rem;
		}

		& + p {
			margin-top: 2rem;
		}

		& + ul,
		& + ol {
			margin-top: 2rem;
		}

		strong {
			font-weight: $font-weight-medium;
		}
	}

	video {
		margin: 2rem 0;
	}

	a:not(.a-link.icon-arrow-right):not(.a-button):not(.cta_button) {
		position: relative;

		font-family: $font-family-roboto;
		font-weight: $font-weight-medium;
		font-size: $font-size !important; /* stylelint-disable-line */
		line-height: 2.3rem;

		color: $text-color;

		&::after {
			content: "";

			position: absolute;
			left: 0;
			bottom: 0;

			display: block;
			width: 100%;

			height: 0.2rem;

			background-color: $background-color-grey;

			transform-origin: center right;

			transition: background-color 1.5s ease-in-out;
		}

		&:hover {
			color: $text-color-primary;

			&::after {
				background-color: $background-color-primary;

				animation: line 1.5s cubic-bezier(0.4, 0, 0.2, 1);
			}
		}
	}

	a {

		&.a-button {
			display: inline-flex;
			justify-content: center;
			align-items: center;

			&::before {
				position: relative;

				width: auto;

				margin-right: 1rem;

				background: transparent;

				opacity: 0.4;
			}

			&:hover {

				&::before {
					opacity: 1;
				}
			}
		}
	}

	li {
		font-weight: $font-weight-thin;

		& > a {

			&:not(.a-link),
			&:not(.a-button) {
				position: relative;

				font-weight: $font-weight-semibold;

				color: $text-color;

				&::after {
					content: "";

					position: absolute;
					left: 0;
					bottom: 0;

					display: block;
					width: 100%;

					height: 0.2rem;

					background-color: $background-color-grey;

					transform-origin: center right;

					transition: background-color 1.5s ease-in-out;
				}

				&:hover {
					color: $text-color-primary;

					&::after {
						background-color: $background-color-primary;

						animation: line 1.5s cubic-bezier(0.4, 0, 0.2, 1);
					}
				}
			}
		}
	}

	blockquote {
		margin-right: 0;
		margin-left: 0;
		padding: 4rem 11rem;

		text-align: left;

		background-color: $background-color-grey-extra-light;
		color: $text-color !important; /* stylelint-disable-line */

		p,
		em,
		span,
		strong,
		a {
			font-family: $font-family-beausans;
			font-weight: $font-weight-medium;
			font-style: normal;
			font-size: $font-size-3x-large !important; /* stylelint-disable-line */
			line-height: $line-height-4x-large;

			color: $text-color !important; /* stylelint-disable-line */

			@include respond-to($screen-small-base) {
				font-weight: $font-weight-bold;
				font-size: $font-size-2x-large;
				line-height: $line-height-2x-large;
			}
		}

		strong {
			font-weight: $font-weight-bold;
		}
	}

	table {
		width: 100%;
		margin: 0;

		border: none;
		border-collapse: collapse;

		td,
		th {
			padding: 1.6rem 0;

			text-align: left;

			border: none;
		}

		tr {

			border-bottom: $border-default;
		}

		th {
			font-weight: $font-weight-bold;
		}
	}

	.blog-quote {
		position: relative;

		padding: 4rem 11rem;

		text-align: left;

		background-color: $background-color-grey-extra-light;

		@include respond-to($screen-small-base) {
			padding: 2rem 4rem;
		}

		i {
			position: absolute;
			top: 1rem;
			left: 5rem;

			display: block;

			font-family: $font-family-beausans;
			font-weight: $font-weight-bold;
			font-style: normal;
			font-size: $font-size-5x-large;
			line-height: $line-height-6x-large;

			@include respond-to($screen-small-base) {
				top: 2rem;
				left: 2rem;

				font-size: $font-size-3x-large;
				line-height: $line-height-4x-large;
			}
		}

		span i {
			position: initial;

			text-align: right;
			font-size: $font-size;

			@include respond-to($screen-small-base) {
				font-size: $font-size;
			}
		}

		p,
		em {
			font-family: $font-family-beausans;
			font-weight: $font-weight-medium;
			font-style: normal;
			font-size: $font-size-3x-large;
			line-height: $line-height-4x-large;

			@include respond-to($screen-small-base) {
				font-weight: $font-weight-bold;
				font-size: $font-size-2x-large;
				line-height: $line-height-2x-large;
			}
		}
	}

	img {
		width: 100% !important; /* stylelint-disable-line */
		height: auto !important; /* stylelint-disable-line */
	}

	.cols-12-md {

		@include respond-at($screen-small-base) {
			display: flex;
		}

		.cols-10-md {
			@include respond-at($screen-small-base) {
				margin-left: 1rem;
			}
		}
	}

	figure,
	.blog-quote-image {
		overflow: hidden;
		margin: 4rem 0;

		> div:not(.blog-quote) {
			position: relative;

			min-height: 43rem;
			max-height: 43rem;
			overflow: hidden;
		}

		img {
			position: absolute;

			width: 100%;
			min-width: 100%;
			min-height: 100%;
			object-fit: cover;
		}

		figcaption,
		.blog-quote {
			margin-top: 1rem;
		}
	}

	ul {
		@extend %__m-list;
		margin-top: 2rem;

		& + * {
			margin-top: 2rem;
		}
	}

	ol {
		@extend %__m-list;
		@extend %__m-list--ordered;
	}

	.hs-cta-img {
		margin-top: 2rem;
	}

	.m-cta {
		min-height: 20rem;
	}

	.m-cta__content {
		padding: 2rem;

		@include respond-at($screen-small-base) {
			padding: 2rem 4rem;
		}

		@include respond-at($screen-medium-base) {
			padding: 5rem;
		}
	}

	.m-cta__image-container {

		@include respond-at($screen-small-base) {
			min-width: 20rem;
		}

		@include respond-at($screen-medium-base) {
			min-width: 25rem;
		}
	}
}

// ============================================================================
// :: AnimationS
// ============================================================================
@keyframes line {

	0% {
		background-color: $background-color-grey;

		transform-origin: center right;
		transform: scaleX(1);
	}

	25% {
		background-color: $background-color-grey;

		transform: scaleX(0);
		transform-origin: center right;
	}

	35% {
		background-color: $background-color-primary;

		transform-origin: center left;
		transform: scaleX(0);
	}

	50% {
		background-color: $background-color-primary;

		transform: scaleX(1);
		transform-origin: center left;
	}
}