/* tool-card, and the tool-grid that holds them
   Component: templates/components/tool-card.php
   Specimen: /design-system/components/tool-card
   Used at: /admin

   Structure only: a tinted tile with the tool's icon set large, the name,
   one line. Cards in a group sit close; the space between groups is the
   page sections'. */

tool-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
	gap: var(--space-large) var(--space-medium);
	margin-top: var(--space-medium);
}

tool-card {
	display: block;

	.tile {
		display: grid;
		place-items: center;
		aspect-ratio: 3 / 2;
		background-color: var(--fill-secondary);
		border: 1px solid var(--stroke-auxiliary);
		font-size: 2.5rem;
		color: var(--ink-secondary);

		.icon {
			width: 1em;
			height: 1em;
		}
	}

	h3 {
		margin-top: var(--space-small);
	}

	p {
		margin-top: 0.25em;
	}

	&:hover .tile,
	&:focus-within .tile {
		border-color: var(--stroke-primary);
		color: var(--ink-primary);
	}
}