Front article: O-Ton

.o-front-article {
	@extend .grid-item;

	&__cat-title {
		@include media($_DESKTOP) {
			margin-bottom: 8px;
		}
	}

	&__quote {
		position: absolute;
		@include fluid-grid-item-props(top right);

		svg {
			fill: $color-primary-super-light;
			height: 29px;
			width: 40px;

			@include high-contrast {
				fill: $color-grey-3;
			}

			@include media($_DESKTOP) {
				height: 39px;
				width: 56px;
			}
		}
	}

	&__articles {
		display: flex;
		flex-wrap: wrap;
		flex-grow: 1;
	}

	&--mm &__articles {
		@include media($_MOBILE) {
			padding: 12px 0;
		}
	}

	&__article {
		margin-top: 22px;
		width: 100%;
	}

	&--double &__article {
		@include media($_MOBILE) {
			&:first-child {
				border-bottom: solid 1px $color-grey-2;
				padding-bottom: 20px;
			}
		}

		@include media($_DESKTOP) {
			width: calc(50% - 16px);

			&:first-of-type {
				margin-right: 16px;
			}

			&:last-of-type {
				margin-left: 16px;
			}

			.m-front-article__title {
				font-size: 1rem;
			}
		}
	}

	&--mm {
		position: relative;
		background: $color-grey-1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		min-height: 80%;

		@include media($_MOBILE) {
			margin-top: 41px;
			margin-bottom: 41px;
		}
	}

	&__cta {
		margin-top: 16px;
		border-top: 1px solid $color-grey-2;
		display: flex;
		flex-direction: column-reverse;

		@include media($_DESKTOP) {
			flex-direction: row;
			align-items: center;
			padding-top: 20px;
		}
	}

	&__cta-label {
		margin: 16px 0;
		line-height: 1.4em;

		@include media($_DESKTOP) {
			margin-left: 40px;
		}
	}

	&__mm {
		display: flex;
		width: 100%;
		align-items: flex-end;
		justify-content: space-between;
	}

	&__author-image {
		width: 100px;
		height: 100px;
		transform: rotate(-5deg);
		transform-origin: bottom right;
		margin-left: 20px;

		@include media(480px) {
			margin-top: -27px;
		}
	}

	&__meta {
		flex-grow: 1;
		border-top: solid 1px $color-grey-2;
		margin-top: 12px;
		font-size: 0.875rem; // 14/16
	}

	&__date {
		display: block;
		margin: 12px 0 8px;

		@include media($_DESKTOP) {
			margin-bottom: 0;
			display: inline-block;
		}
	}

	&__author {
		@include clean-link;
		display: inline-block;
		font-weight: bold;

		@include media($_DESKTOP) {
			margin-left: 28px;
			position: relative;

			&::before, &:hover::before {
				content: "\25A0";
				color: $color-secondary;
				position: absolute;
				left: -19px;
				transform: translateY(-0.1em) rotate(-5deg);
				font-size: 0.9em;
				-webkit-text-size-adjust: 50%;
			}
		}
	}
}