.cards.has-columns {
	--columns: 3;
	display: grid;
	gap: var(--gap, 2rem);
	grid-auto-flow: row dense;
	grid-template-columns: 100%;
	grid-auto-rows: auto;
}

@media screen and (min-width: 1024px) {
	.cards.has-columns {
		grid-template-columns: repeat(var(--columns, 3), minmax(100px, 1fr));
	}
}

@media screen and (min-width: 1024px) {
	.cards.has-columns {
		grid-template-columns: repeat(2, minmax(100px, 1fr));
		grid-template-columns: repeat(var(--columns-desktop, 2), minmax(100px, 1fr));
	}
}

@media screen and (min-width: 1216px) {
	.cards.has-columns {
		grid-template-columns: repeat(3, minmax(100px, 1fr));
		grid-template-columns: repeat(var(--columns-widescreen, 3), minmax(100px, 1fr));
	}
}

@media screen and (min-width: 1024px) {
	.cards.has-columns {
		row-gap: 4.5rem;
	}
}

.cards.has-columns.has-columns-1 {
	--columns: 1;
}

.cards.has-columns.has-columns-2 {
	--columns: 2;
}

.cards.has-columns.has-columns-3 {
	--columns: 3;
}

.cards.has-columns.has-columns-4 {
	--columns: 4;
}

.cards.has-columns.has-columns-5 {
	--columns: 5;
}

.cards.has-columns.has-columns-6 {
	--columns: 6;
}


.cards.has-list {
	display: flex;
	flex-direction: column;
	gap: var(--gap, 2rem);
}

.cards.has-list.is-reverse .list-item {
	flex-direction: row-reverse;
}


.list-item {
	display: flex;
	flex-direction: row;
	gap: var(--gap, 2rem);
	position: relative;
}

.list-item-image {
	width: min(200px, 25%);
}

.list-item-body {
	flex: 1;
}

.list-item img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

.list-item.is-reverse {
	flex-direction: row-reverse;
}

.card-image img {
	display: block;
	aspect-ratio: 16 / 9;
	height: 100%;
	width: 100%;
	overflow: hidden;
}

.card-body>h3>a:after,
.card-link:after {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	content: ' ';
	z-index: 10;
}