.article-card {
	cursor: pointer;
	display: flex;
	flex-wrap: wrap;
	min-width: 0;
	overflow: hidden;
	padding-bottom: 32px;
	position: relative;

	&.-large {
		@media only screen and (min-width: 768px) {
			grid-column: auto / span 2;
			grid-row: auto / span 2;
		}

		@media only screen and (min-width: 1024px) {
			// 16:10 doesn't exactly fit, so add the missing padding to the image
			> .thumbnail {
				padding-bottom: calc(62.5% + 42px);
			}
		}
	}

	&.-mockup {
		> .title {
			background: var(--mint);
		}

		> .thumbnail {
			@extend ._dotted-background;

			position: relative;

			> .spinner {
				@include Align(absolute);
			}
		}
	}

	> .thumbnail {
		@extend ._dotted-background;

		padding-bottom: 62.5%;
		position: relative;
		width: 100%;

		> .icon {
			@include Align(absolute);

			height: 32px;
			width: 32px;
		}

		> img {
			height: 100%;
			object-fit: cover;
			position: absolute;
			width: 100%;
		}
	}

	> .title,
	> .duration {
		@include z-index(3);
	}

	> .title {
		@extend ._dotted-background;

		@include font(cabin, bold, (14 / 16));

		background-color: var(--white);
		background-size: 6px 6px;
		bottom: 0;
		color: var(--black);
		height: 32px;
		letter-spacing: 2px;
		line-height: 32px;
		overflow: hidden;
		padding: 0 16px;
		position: absolute;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100%;

		> em {
			font-style: italic;
		}

		@media only screen and (min-width: 768px) {
			font-size: 16px;
			width: calc(100% - 80px);
		}
	}

	> .duration {
		@include font(cabin, regular-italic, (12 / 16));

		background-color: var(--mint);
		bottom: 32px;
		color: var(--white);
		letter-spacing: 2px;
		line-height: 18px;
		padding: 0 16px;
		position: absolute;
		right: 0;
		text-align: right;
		width: auto;

		@media only screen and (min-width: 768px) {
			background-color: var(--mint);
			bottom: 0;
			font-size: 16px;
			height: 32px;
			line-height: 32px;
			text-align: center;
			width: 80px;
		}
	}
}

//	                                     /$$         /$$
//	                                    | $$        | $$
//	  /$$$$$$$  /$$$$$$   /$$$$$$   /$$$$$$$        | $$$$$$$   /$$$$$$  /$$    /$$ /$$$$$$   /$$$$$$
//	 /$$_____/ |____  $$ /$$__  $$ /$$__  $$ /$$$$$$| $$__  $$ /$$__  $$|  $$  /$$//$$__  $$ /$$__  $$
//	| $$        /$$$$$$$| $$  \__/| $$  | $$|______/| $$  \ $$| $$  \ $$ \  $$/$$/| $$$$$$$$| $$  \__/
//	| $$       /$$__  $$| $$      | $$  | $$        | $$  | $$| $$  | $$  \  $$$/ | $$_____/| $$
//	|  $$$$$$$|  $$$$$$$| $$      |  $$$$$$$        | $$  | $$|  $$$$$$/   \  $/  |  $$$$$$$| $$
//	 \_______/ \_______/|__/       \_______/        |__/  |__/ \______/     \_/    \_______/|__/
.card-hover {
	height: 100%;
	position: absolute;
	width: 100%;

	&::before {
		@extend ._dotted-background;

		@include z-index(1);

		content: "";
		height: calc(100% - 32px);
		left: 0;
		position: absolute;
		top: 100%;
		transition: top .5s ease-in-out .15s;
		width: 100%;
	}

	> .content,
	> .excerpt {
		@include z-index(2);

		bottom: -100%;
		height: calc(80% - 32px);
		position: absolute;
		transition: bottom .5s ease-in-out 0s;
	}

	> .content {
		@include z-index(2);

		background-color: var(--black);
		left: 0;
		padding: 12px 16px;
		width: calc(100% - 50px);

		> .title {
			@include font(cabin, bold, (16 / 16));

			color: var(--white);
			letter-spacing: 1.5px;
			line-height: 1.25;
			padding-bottom: .5em;
			position: relative;
		}

		> .author {
			letter-spacing: 2px;

			> .name {
				@include font(cabin, bold, (14 / 16));
			}

			> .title {
				@include font(cabin, regular-italic, (14 / 16));

				display: none;
			}

			> .name,
			> .title {
				color: var(--mint);
				line-height: 1.25;
			}
		}

		> .category,
		> .date {
			bottom: 12px;
			color: var(--yellow);
			font-size: 12px;
			letter-spacing: 1.5px;
			margin-bottom: 0;
			position: absolute;
		}

		> .category {
			left: 16px;
		}

		> .date {
			right: 16px;
		}
	}

	> .excerpt {
		@include font(cabin, regular, (20 / 16));

		background-color: var(--mint);
		border-bottom: 16px solid var(--black);
		border-right: 16px solid var(--black);
		display: none;
		left: calc(50% + 32px);
		letter-spacing: 1.5px;
		padding: 28px;
		width: calc(50% - 32px - 50px);

		> p {
			opacity: 0;
			position: relative;
			transform: translate3d(0, 10%, 0);
			transition: all .5s ease .55s;
		}
	}

	> .information {
		@include font(cabin, bold, (14 / 16));
		@include z-index(3);

		background-color: var(--mint);
		bottom: 0;
		color: var(--white);
		height: 32px;
		left: 0;
		letter-spacing: 2px;
		line-height: 32px;
		opacity: 0;
		padding: 0 16px;
		position: absolute;
		transition: opacity .3s ease-in-out;
		width: calc(100% - 80px);

		&::after {
			content: "";
			height: 100%;
			position: absolute;
			width: 100%;
		}
	}

	&:hover,
	&.-active {
		&::before {
			top: 0;
			transition: top .5s ease-in-out 0s;
		}

		> .content,
		> .excerpt {
			bottom: 32px;
			transition: bottom .5s ease-in-out .15s;
		}

		> .excerpt {
			> p {
				opacity: 1;
				transform: translate3d(0, 0, 0);
			}
		}

		> .information {
			opacity: 1;
		}
	}

	&.-large {
		> .information {
			padding-left: calc(50% + 32px);
		}

		> .content {
			padding: 28px 32px;
			width: calc(50% + 32px);

			> .title {
				font-size: 24px;
				margin-bottom: .5em;

				&::after {
					background-color: var(--yellow);
					bottom: 0;
					content: "";
					display: block;
					height: 2px;
					left: 0;
					position: absolute;
					width: 64px;
				}
			}

			> .author {
				> .title {
					display: block;
				}
			}

			> .category,
			> .date {
				bottom: 28px;
			}

			> .category {
				left: 32px;
			}

			> .date {
				right: 32px;
			}
		}

		> .excerpt {
			display: block;
		}
	}
}