@media print
{
	.category .box
	{
		page-break-inside: avoid;
	}
}

.category .standard-grid
{
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 416px), 416px));
}

.category .box
{
	display: grid;
	scroll-snap-align: center;
	grid-gap: 16px;
}
.category .box img
{
	user-select: none;
	width: 100%;
	border-radius: var(--radius-tiny);
}

.category .box > a:nth-child(2)
{
    background: transparent;
    grid-row: 1;
    position: absolute;
}
.category .box > a:nth-child(2) h2
{
	color: var(--colour-base);
    padding: 16px;
    text-shadow: 0px 4px 4px #00000080;
    font-size: 32px;
    font-weight: bold;
	text-wrap: balance;
}


.category .box h2
{
	font-size: 22px;
	color: var(--colour-main-text);
	font-weight: var(--font-weight-bold);	
	padding: 8px 0px;
}
.category .box > nav
{
	align-items: center;
	display: grid;
	grid-gap: 8px;
	grid-auto-flow: column;							
	grid-auto-columns: auto auto 1fr;
}
.category .box > nav > a:not(.button)
{
    height: 38px;
    padding: 10px 0px;	
	color: var(--colour-secondary-text);
	white-space: nowrap;
	font-size: var(--font-size-standard);
	font-weight: var(--font-weight-normal);
}
.category .box > nav > a span
{
	color: var(--colour-main-text);
	font-weight: var(--font-weight-bold);
}			
.category .box > nav > a:hover span
{
	color: var(--colour-main);
}
.category .box > nav > a.button
{
	width: 100px;
	justify-self: end;	
    font-size: 1em;
}