.card {
	background-color: var(--col-foreground);
	padding: var(--lg);
	border-radius: var(--md);
	
	&[href] {
		cursor: pointer;
		transition: var(--transition);
		outline: 4px solid transparent;

		&:focus-visible {
			outline-color: rgb(from color-mix(in srgb, var(--col-contrast) 85%, var(--col-interactive)) r g b / 7.5%);
		}

		&:hover,
		&:focus-visible {
			color: color-mix(in srgb, var(--col-text) 45%, var(--col-interactive));	
			background-color: color-mix(in srgb, var(--col-contrast) 87.5%, var(--col-interactive));
			transition: var(--transition-quick);
		}
	}

	@media (width < 600px) {
		padding-inline: var(--md);
	}
}
.card--sm {
	padding: var(--md);
	border-radius: var(--sm);
}
.card--xs {
	padding: var(--sm);
	border-radius: var(--xs);
}