@media print
{
	.category .box
	{
		page-break-inside: avoid;
	}
}
.category.panel
{
	width: var(--content-width);
	padding: var(--content-padding);
	margin: auto;
}		
.category .standard-grid
{
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 324px), 324px));
	grid-gap: 24px;
	padding: 0px;
}
@media (min-width: 769px)
{
	.category .standard-grid
	{
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 380px));
		grid-gap: 24px;
	}	
}
@media (min-width: 1025px)
{
	.category .standard-grid
	{
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 410px), 410px));
		grid-gap: 24px;
	}	
}


.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: 18px;
	line-height: 27px;
	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;
}