.card {
	background-color: var(--col-light);
	padding: var(--lg);
	border-radius: var(--md);
	
	&.sm {
		padding: var(--md);
		border-radius: var(--sm);
	}
	&.xs {
		padding: var(--sm);
		border-radius: var(--xs);
	}

	&:is(a[href]) {
		cursor: pointer;
		transition: var(--transition);
		outline: 4px solid transparent;

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

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

			.name,
			.date {
				color: color-mix(in srgb, var(--col-dark) 40%, var(--col-interactive));
			}

			&.new {
				color: var(--col-background);
				background-color: color-mix(in srgb, var(--col-dark), var(--col-interactive));
			}
		}
	}

	@media (width < 600px) {
		padding-inline: var(--md);
	}
}