.thumb-grid {
	--accent: var(--text-2);
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(calc(7rem + 3vw), 1fr));
	list-style: none;
	gap: calc(0.5 * (1.5rem + (0.5 * var(--padding))));
	grid-auto-rows: 1fr;
	padding-inline-start: 0;
}

.thumb-grid li {
	border: var(--border-1) solid var(--accent);
	border-radius: var(--radius);
	aspect-ratio: 2 / 1;
	position: relative;
	/* grid-column: span 2; */
}

.thumb-grid .thumb-label {
	background: var(--accent);
	border-top-right-radius: var(--radius);
	border-bottom-left-radius: var(--radius);
	bottom: calc(var(--border-1) * -1);
	color: white;
	left: calc(var(--border-1) * -1);
	padding: .45em .5rem;
	position: absolute;
	line-height: 1.2em;
	max-width: calc(100% - var(--radius));
	/* position: absolute;
	color: var(--back-1);
	text-shadow: 
		   0px -1.1px 0px #000,
		 0.7px -0.7px 0px #000,
		 1.1px    0px 0px #000,
		 0.7px  0.7px 0px #000,
		   0px  1.1px 0px #000,
		-0.7px  0.7px 0px #000,
		-1.1px    0px 0px #000,
		-0.7px -0.7px 0px #000,
		   0px -1.1px 0px #000
	;
	bottom: calc(var(--border-1) * -1);
	left: calc(var(--border-1) * -1);
	right: calc(var(--border-1) * -1);
	padding-bottom: 0.25em;
	border-bottom-left-radius: var(--radius);
	border-bottom-right-radius: var(--radius);
	padding-left: 0.5em;
	padding-top: 1rem;
	background: radial-gradient(farthest-side ellipse at bottom left, #0007, 30%, #0002 57%, 68%, #00000007 83%, #0000); */
}

@media (max-width: 380px) {
	.thumb-grid:not(.horizontal) {
		justify-content: space-evenly;
	}
}

.thumb-grid.horizontal {
	grid-template-columns: 1fr;
	grid-auto-rows: 5rem;
	gap: 1rem;
}
.thumb-grid.horizontal li {
	padding: 0;
	height: 100%;
	width: 100%;
}