Card: Variant: Multi-Image

.card {
	$card__internal-spacing: $spacing-xs;
	$card__internal-padding: calc($spacing-2xs + $spacing-multiplier);
	--accent: #{$secondary};
	--accent-contrast: #{choose-contrast-color-prefer-white($secondary)};

	position: relative;
	margin-bottom: $spacing-xl;
	@include typescale('sm');
	border-left: $border-accent-width solid;
	border-image:
		linear-gradient(
				to bottom,
				var(--accent) 50%,
				rgba(white, 0)
		) 1 100%;

	&__flag {
		display: inline-block;
		margin-bottom: calc($spacing-2xs + math.div($spacing-multiplier, 4));
		background: var(--accent);
		color: var(--accent-contrast);
		padding: $spacing-4xs $spacing-sm $spacing-4xs $card__internal-padding;

		> * {
			margin: 0;
		}
	}

	&__flex {
		display: flex;
		flex-direction: row-reverse;
		flex-wrap: wrap;
		column-gap: $spacing-sm;
		padding-top: calc($spacing-2xs + math.div($spacing-multiplier, 4));
	}

	&__figure {
		flex: 3 99 17.5%;
		margin: 0 0 $card__internal-padding;
		padding: 0 0 0 $card__internal-padding;

		img {
			border-bottom-right-radius: $border-radius-lg;
			aspect-ratio: 2 / 1;
			height: 100%;
			width: 100%;
			object-fit: cover;
		}

		&--uncropped {
			img {
				width: auto;
				height: auto;
				max-height: 90vh;
				margin-left: auto;
				margin-right: auto;
				aspect-ratio: auto;
			}
		}

		&--shadow {
			img {
				box-shadow: 0 0 $border-accent-width rgba($grey--borders, 0.75);
			}
		}

		&--icon {
			.card__figureFrame {
				padding: calc(5% + #{$spacing-lg}) 5%;
				border-bottom-right-radius: $border-radius-lg;
			}
		}
	}

	&__figureFrame {
		background: linear-gradient(to bottom, $offwhite, rgba(white, 0));
		padding: 5%;
		box-sizing: border-box;
		text-align: center;

		img, svg {
			max-width: 100%;
			box-sizing: border-box;
			margin: auto;
		}

		.icon {
			font-size: 5em;

			svg, path {
				fill: var(--svg-fill, $neutral--primary);
			}
		}

		&--primary {
			--svg-fill: white;
			background: linear-gradient(to bottom, $primary, lighten($primary, 15%));
		}

		&--secondary {
			--svg-fill: white;
			background: linear-gradient(to bottom, $secondary, lighten($secondary, 15%));
		}

		&--tertiary {
			--svg-fill: white;
			background: linear-gradient(to bottom, $tertiary, lighten($tertiary, 15%));
		}

		&--neutral {
			--svg-fill: white;
			background: linear-gradient(to bottom, $neutral--primary, lighten($neutral--primary, 15%));
		}
	}

	&__img {
		&--bordered {
			border: $border-accent-width solid $offwhite;
		}

		&--no-radius {
			border-radius: 0 !important;
		}
	}

	&__imageGrid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 2.5%;
		aspect-ratio: 2 / 1;

		img {
			aspect-ratio: auto;
			width: auto;
			height: auto;
		}
	}

	&__imgPlaceholder {
		background: $offwhite;
		border-bottom-right-radius: $border-radius-lg;
	}

	&__videoShort {
		@include video-container('portrait');
		border-bottom-right-radius: $border-radius-lg;
	}

	&__icon {
		flex: 1 99 1em;
		margin: 0 0 $card__internal-padding;
		display: inline-flex;
		align-self: flex-start;
		align-items: center;
		justify-content: center;
		text-align: center;

		.icon {
			font-size: 1.5em;
			background: $neutral--primary;
			border-radius: 100%;
			padding: 0.35em;

			svg, path {
				fill: var(--svg-fill, white);
			}

			&--bg-primary {
				background: $primary;
			}

			&--bg-secondary {
				background: $secondary;
			}

			&--bg-tertiary {
				background: $tertiary;
			}
		}
	}

	&__content {
		flex: 99 1 30rem;
		padding: 0 $card__internal-padding $card__internal-padding;
	}

	&__title {
		margin: 0 0 $card__internal-spacing;
		font-weight: bold;

		&--light {
			font-weight: normal;
		}
	}

	&__description,
	:where(p) {
		margin-bottom: $card__internal-spacing;
	}

	&__quote {
		margin: 0 0 $spacing-md;
		@include typescale('md');
	}

	&__section {
		.card__flex {
			flex-direction: row;
			column-gap: $grid-gutter-large;
		}

		&Title {
			margin: $spacing-lg 0 $spacing-sm;
			padding: $spacing-xs 0;
			border-top: 1px solid $grey--borders;
			border-bottom: 1px solid $grey--borders;
			border-image:
				linear-gradient(
						to right,
						#{$grey--borders},
						rgba(white, 0)
				) 1;
		}
	}

	&__meta {
		flex: 99 1 30rem;
		align-self: flex-start;
		margin-top: $spacing-sm;
		margin-bottom: $card__internal-spacing;
		@include typescale('xs');
		color: var(--text-color, $grey--mid-dark);

		a {
			color: $grey--mid-dark;
		}

		> *:where(p, ul, dl) {
			margin-bottom: $spacing-sm;
		}

		> *:last-child {
			margin-bottom: 0;
		}
	}

	&__actions {
		flex: 1 1 10rem;
		margin-top: $spacing-md;
	}

	.pointyLink {
		color: var(--text-color, black);

		&:hover,
		&:focus {
			color: var(--link-hover-color, $tertiary);
		}
	}

	[class*='link--stretched'] {
		&:focus {
			outline: none;

			&::before {
				outline: 0.15em solid rgba($grey, 0.75);
				outline-offset: $card__internal-spacing;
			}
		}
	}

	a:where(:not([class*='link--stretched']):not([class*='button'])) {
		position: relative;
		z-index: 1;
		color: var(--text-color, auto);
	}

	// Layout Variants

	&--has-small-figure {
		.card__content {
			flex: 10 1 18rem;
		}

		.card__figure {
			flex: 3 99 30%;
		}
	}

	&--has-small-content {
		.card__content {
			flex: 5 1 10rem;
		}

		.card__figure {
			flex: 3 99 30%;
		}
	}

	&--publication {
		> .card__flex {
			flex-direction: row;
			column-gap: $card__internal-spacing;
		}

		//.card__content {
		//	flex: 99 1 18rem;
		//}
	}

	// Theme Variants

	&--tertiary {
		--accent: #{$tertiary};
		--accent-contrast: #{choose-contrast-color-prefer-white($tertiary)};
	}

	&--bg-gradient-grey {
		border-color: transparent;
		border-image: none;
		background: linear-gradient(to bottom, $grey--lightest, transparent);
		padding-top: $spacing-xs;

		.card__flag {
			display: block;
			width: fit-content;
			margin-top: -#{$spacing-xs};
			margin-left: -#{$border-accent-width};
			padding-left: calc($spacing-xs + $spacing-multiplier);
		}
	}
}