// ============================================================================
// :: ARTICLE PREVIEW
// ============================================================================
.m-article-preview {
	position: relative;

	transform-origin: center;

	cursor: pointer;

	pointer-events: auto;
}

// ============================================================================
// :: Elements
// ============================================================================
.m-article-preview__container {
	position: relative;

	transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);

	&:hover,
	&:focus {
		transform: translateY(-0.6rem);

		.m-article-preview__content__title {
			color: $text-color-primary;
		}
	}
}

.m-article-preview__link {
	position: relative;

	display: block;
	width: 100%;
	height: 100%;

	&:focus:not(:hover) {
		@include outline();
	}
}

.m-article-preview__picture {
	position: relative;

	display: block;
	width: 100%;
	height: 15rem;
	margin-bottom: 2rem;

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

	pointer-events: none;

	@include respond-at($screen-small-base) {
		height: 0;
		padding-bottom: 66%;
	}
}

.m-article-preview__image {
	position: absolute;

	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.m-article-preview__content__title {
	margin-bottom: 1.2rem;

	transition: color 0.2s ease-in-out;
}

.m-article-preview__content {
	position: relative;

	pointer-events: none;
}

.m-article-preview__label {
	margin-bottom: 1rem;
}

.m-article-preview__links {
	margin-top: 2rem;
}

.m-article-preview__date {
	display: block;
	margin-bottom: 1rem;

	font-family: $font-family-roboto;
	font-size: $font-size-1x-small;
	line-height: $line-height;

	color: $text-color-dark-brown;
}

// ============================================================================
// :: Modifier
// ============================================================================
.m-article-preview--static {
	cursor: default;

	.m-article-preview__container {

		&:hover,
		&:focus {
			transform: none;

			.m-article-preview__content__title {
				color: $text-color;
			}
		}
	}
}