.c-variation-card {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1fr;
	align-items: end;
	width: 100%;
	padding: 0;
	border: 3px solid var(--color-blue);
	background-color: var(--color-grey-light);
	text-align: left;
	color: var(--color-blue);
	cursor: pointer;

	&.c-variation-card--active,
	&:hover,
	&:focus {
		background-color: var(--color-blue);
		color: var(--color-white);
	}

	.c-variation-card__details {
		display: flex;
		flex-direction: column;
		gap: 5px;
		padding: var(--spacing-xs);
	}

	.c-variation-card__heading {
		font-weight: normal;
		color: inherit;
	}

	.c-variation-card__dimensions {
		font-weight: bold;

		@media (width >= 380px) and (width < 600px) {
			font-size: 24px;
		}

		@media (width >= 768px) {
			font-size: 24px;
		}
	}

	.c-variation-card__image {
		position: relative;
		aspect-ratio: 1;

		img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
}