/* Cards */
.cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: end;
	column-gap: 5em;
	row-gap: 3em;
	margin-bottom: 5em;
}
.cards.has-width-one-card {
	grid-template-columns: repeat(1, 1fr);
}
.cards.has-width-two-cards {
	grid-template-columns: repeat(2, 1fr);
}
.cards.has-width-three-cards {
	grid-template-columns: repeat(3, 1fr);
}
.cards.has-width-four-cards {
	grid-template-columns: repeat(4, 1fr);
}
.cards.has-width-five-cards {
	grid-template-columns: repeat(5, 1fr);
}
.cards.has-width-six-cards {
	grid-template-columns: repeat(6, 1fr);
}
.cards.has-width-seven-cards {
	grid-template-columns: repeat(7, 1fr);
}
.cards.has-width-eight-cards {
	grid-template-columns: repeat(8, 1fr);
}
.cards.has-width-nine-cards {
	grid-template-columns: repeat(9, 1fr);
}
.cards .card {
	align-self: stretch;
    padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}

.cards .content {
    width: 100%;
}
.cards .text {
    padding: 1em;
}
.cards a {
	color: var(--main-blue);
}

@media (max-width: 1024px) {
	/* Cards */
    .cards.has-width-one-card-mobile {
		grid-template-columns: repeat(1, 1fr) !important;
	}
	.cards.has-width-two-cards-mobile {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.cards.has-width-three-cards-mobile {
		grid-template-columns: repeat(3, 1fr) !important;
	}
	.cards.has-width-four-cards-mobile {
		grid-template-columns: repeat(4, 1fr) !important;
	}
	.cards.has-width-five-cards-mobile {
		grid-template-columns: repeat(5, 1fr) !important;
	}
	.cards.has-width-six-cards-mobile {
		grid-template-columns: repeat(6, 1fr) !important;
	}
    
}