.card-link {
	--card-body-background-color: white;
	
	--card-border-width: 2px;
	--card-border-style: solid;
	--card-border-color: var(--color-brand-grey--300);
	/* --card-border-color: red; */
	--card-content-padding: 1rem;
	--card-icon-opacity: 0;

	--card-accent-color: var(--card-accent-color--override, var(--color-context-primary-surface));
	--card-tag-color: var(--card-accent-color--override, var(--color-brand-primary--700));
	--card-cta-color: var(--card-accent-color--override, var(--color-brand-primary--700));

	/* Kill any anchor link styles */
	text-decoration: none;
	color: inherit;

	cursor: pointer;
	display: flex;
	flex-direction: column;
	position: relative;
	background: var(--card-body-background-color);
	isolation: isolate;
	
	/* When inside a swiper slide, make the card take full height and width */
	.swiper-slide > & {
		height: 100%;
		width: 100%;
	}
	
	.card-tag {
		padding: 1rem;
		background: var(--card-tag-color);
		position: absolute;
		z-index: 1;
		top: var(--card-border-width);
		left: var(--card-border-width);
		p {
			margin: 0;
			font-size: var(--fs-label-heading);
			text-transform: uppercase;
			color: white;
		}
	}

	.card-visual {
		position: relative;
		background: var(--color-brand-grey--700);
		background-clip: content-box;
		border: var(--card-border-width) var(--card-border-style) var(--card-border-color);
		border-bottom: 0;
		transition: border 0.3s ease;

		img, video {
			aspect-ratio: 16/9;
			height: auto;
			width: 100%;
			max-width: 100%;
			object-fit: cover;
			object-position: center;
		}
		.card-description-overlay {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			overflow: auto;
			background: rgba(0, 0, 0, 0.6);
			color: white;
			padding: 1rem;
			opacity: 0;
			transition: opacity 0.3s ease;
		}
	}

	&:hover .card-description-overlay {
		opacity: 1;
	}

	.card-content {
		padding: var(--card-content-padding);
		border: var(--card-border-width) var(--card-border-style) var(--card-border-color);
		border-top: 0;
		transition: border 0.3s ease;
		flex: 1;


	}

	.card-heading {
		font-size: var(--fs-card-heading);
		font-weight: var(--fw-medium);
		text-transform: uppercase;
		margin: 0;
	}

	.card-content {
		display: flex;
		flex-direction: row;
		gap: 0.5rem;
	}


	.card-text {
		flex: 1 1 100%;
	}

	.card-icon {
		flex: 0 0;
		display: flex;
		align-items: end;
		justify-content: center;
		color: var(--card-accent-color);
		opacity: var(--card-icon-opacity, 1);
		transition: opacity 0.3s ease;
		--fa-width: 1em;
	}

	.card-cta {
		color: var(--card-cta-color);
		text-decoration: underline;
		text-transform: uppercase;
		font-weight: var(--fw-medium);
		font-size: var(--fs-button);
	}

	&:hover {
		--card-border-color: var(--card-accent-color);
		--card-icon-opacity: 1;
	}
}

.swiper[data-breakpoint="two-columns"],
.swiper[data-breakpoint="three-columns"] {
	.card-link-single {
		flex-direction: row;
		.card-content {
			flex: 0 0 50%;
			border-top: var(--card-border-width) var(--card-border-style) var(--card-border-color);
			border-left: 0;
		}
		.card-visual {
			flex: 0 0 50%;
			img, video {
				height: 100%;
				width: 100%;
				object-fit: cover;
				object-position: center;
			}
		}
	}
}