path: root/css/overview.scss

#overview {
	$cardsPerRow: 3;

	align-items:      center;
	background-color: var(--foregroundColour);
	border-radius:    calc($padding / 2);
	display:          flex;
	flex-wrap:        wrap;
	gap:              $padding;
	padding:          $padding;
	user-select:      none;
	width:            100%;

	a {
		--foregroundColour: var(--backgroundColour);

		align-items:      center;
		aspect-ratio:     1;
		background-color: var(--backgroundColour);
		border-radius:    calc($padding / 2);
		display:          flex;
		flex-basis:       calc((100% - $padding * ($cardsPerRow - 1)) / $cardsPerRow);
		justify-content:  center;
		padding:          $padding;
		width:            $padding;

		@media not (prefers-reduced-motion) {
			transition:                 box-shadow 0.25s;
			transition-timing-function: steps(4);
		}

		&:hover {
			box-shadow: inset 0 0 $padding $shadowColour;
		}

		img {
			display: block;
			width:   50%;
		}
	}
}