.c-location-card {
	flex: 0 1 calc(33.33% - calc(var(--spacing-md) / 1.5));
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1fr;
	width: 100%;
	border: 0;
	padding: 0;
	margin: 0;
	text-align: left;
	background-color: var(--color-grey-light);
	transition: background-color 0.3s;

	&:hover,
	&:focus,
	&.c-location-card--active {
		background-color: var(--color-secondary);
		color: var(--color-white);

		h2, p {
			color: var(--color-white);
		}
	}

	h2, p {
		transition: color 0.3s;
	}

	h2 {
		color: var(--color-primary);
	}

	p {
		color: var(--color-grey);
	}

	.c-location-card__text {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		padding: var(--spacing-md);

		@media (width <= 1280px) {
			padding: var(--spacing-sm);
		}
	}

	.c-location-card__image {
		aspect-ratio: 1;

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