body {
	background-color: var(--clr-yellow);
}

article {
	background-color: var(--clr-white);
	border-radius: 20px;
	border: black 1px solid;
	/* shadow scales from 8px at 375, to 16 at 1440 */
	box-shadow: var(--sizing-box-shadow) var(--sizing-box-shadow) black;
	/*! design shows desktop active with 16px, but desktop inactive with 8px */
	/* box-shadow: 8px 8px black; */

	img {
		border-radius: 10px;
	}

	a {
		color: var(--clr-black);
		text-decoration: none;
	}

	a:has(:hover, :focus) {
		color: var(--clr-yellow);
	}

	.category {
		background-color: var(--clr-yellow);
		border-radius: 4px;
	}
}

article:hover {
	--sizing-box-shadow: 16px;
}