/* Grid system nav */
grid-system-nav {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: var(--unk-z-fixed);
	display: grid;
	grid-template-columns: repeat(var(--grid-cols), 94px);
	grid-template-rows: repeat(var(--grid-rows), 120px);
	gap: calc(var(--unk-column-gap) * 2);
	width: -webkit-max-content;
	width: -moz-max-content;
	width: max-content;
	height: -webkit-max-content;
	height: -moz-max-content;
	height: max-content;
	padding: calc(var(--unk-column-gap) * 2);
	pointer-events: none;
	transform: translate(-50%, -50%);
}

grid-system-nav .grid-system-card {
	grid-column: var(--grid-col);
	grid-row: var(--grid-row);
	width: 94px;
	height: 120px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

grid-system-nav .grid-system-card.has-placeholder {
	background: var(--unk-border-color);
}

grid-system-nav[data-active-type='product'] .grid-system-card[data-grid-type='product'],
grid-system-nav[data-active-type='designer'] .grid-system-card[data-grid-type='designer'],
grid-system-nav[data-active-type='magazine'] .grid-system-card[data-grid-type='magazine'],
grid-system-nav[data-active-type='collection'] .grid-system-card[data-grid-type='collection'] {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

grid-system-nav .grid-system-card img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}