:root {
  --min-gap: 0.25rem;
  --med-gap: 0.5rem;
  --max-gap: 1rem;
}


/* mobile */
.item-grid-wrapper {
	display: grid; 
	gap: var(--min-gap) var(--min-gap);
	padding-bottom: var(--max-gap);
	margin-top: 3rem;
}

.item-grid-wrapper {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	/* grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr; */
	grid-template-areas: 
		"igh igh igh igh igh igh"
		"igh igh igh igh igh igh"
		"igh igh igh igh igh igh"
		"igb1 igb2 igb3 igb4 igb5 igb6"
		"igb7 igb8 igb9 igb10 igb11 igb12"
		"igl igl igl igl igl igl"; 
}

.igh { grid-area: igh; overflow: hidden; }
.igb1 { grid-area: igb1; overflow: hidden;  }
.igb2 { grid-area: igb2; overflow: hidden;  }
.igb3 { grid-area: igb3; overflow: hidden;  }
.igb4 { grid-area: igb4; overflow: hidden;  }
.igb5 { grid-area: igb5; overflow: hidden;  }
.igb6 { grid-area: igb6; overflow: hidden;  }
.igb7 { grid-area: igb7; overflow: hidden;  }
.igb8 { grid-area: igb8; overflow: hidden;  }
.igb9 { grid-area: igb9; overflow: hidden;  }
.igb10 { grid-area: igb10; overflow: hidden;  }
.igb11 { grid-area: igb11; overflow: hidden;  }
.igb12 { grid-area: igb12; overflow: hidden;  }
.igl { grid-area: igl; overflow: hidden;  }

.igh IMG,
.igb1 IMG,
.igb2 IMG,
.igb3 IMG,
.igb4 IMG,
.igb5 IMG,
.igb6 IMG,
.igb7 IMG,
.igb8 IMG,
.igb9 IMG,
.igb10 IMG,
.igb11 IMG,
.igb12 IMG
 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s;
    transform: scale(1);
}

.hover-zoom {
    border-radius: 0.3rem;
}
.hover-zoom IMG:hover,.hover-zoom IMG:focus {
    transform: scale(1.1)
}
.igl {
	text-align: center;
}
.igl .collection-name {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.1rem;
	line-height: 1rem;
	font-weight: bold;
	padding-top: 1rem;
	padding-bottom: 1rem;
}
.igl .collection-summary {
	font-size: 0.9rem;
}
.igl .collection-count {
	font-weight: bold;
	margin-top: 0.5rem;
}
.hex-list {
	display: none;
}

/* multiple */
@media screen and (min-width: 920px) {
	.item-grid-wrapper {
		gap: var(--max-gap) var(--max-gap);
	}
	.item-grid-wrapper .igl {
		text-align: left;
		padding: 5rem 4rem 4rem 4rem;
	}
		.igl .hex-list {
			margin-top: 1rem;
		}
		.igl .hex-list A {
			display: inline-block;
			font-size: 1.25rem;
			transition: transform 0.3s;
			transform: translateY(0);
			width: 30px;
			height: 30px;
			
		}
		.igl .hex-list A:hover {
			transform: translateY(0.5rem);
		}
		.item-grid-wrapper .collection-summary {
			max-width: 300px;
			margin-top: 3rem;
			letter-spacing: 0.1rem;
			font-size: 0.83rem;
		}
		.item-grid-wrapper.column1-left .igl {
			text-align: right;
		}
		.item-grid-wrapper.column1-right .igl {
			text-align: left;
		}
		.item-grid-wrapper.column1-left .igl .collection-summary {
			margin-left: auto;
		}
	/* left = text */
	/* 1 - 3 item */
	.item-grid-wrapper.ic1.column1-left,
	.item-grid-wrapper.ic2.column1-left,
	.item-grid-wrapper.ic3.column1-left
	{
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
		grid-template-areas: 
		"igl igl igl igb1 igh igh igh igh"
		"igl igl igl igb2 igh igh igh igh"
		"igl igl igl igb3 igh igh igh igh"; 
	}
	.item-grid-wrapper.ic1.column1-right,
	.item-grid-wrapper.ic2.column1-right,
	.item-grid-wrapper.ic3.column1-right
	{
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
		grid-template-areas: 
		"igh igh igh igh igb1 igl igl igl"
		"igh igh igh igh igb2 igl igl igl"
		"igh igh igh igh igb3 igl igl igl"; 
	}
	
	/* 4 - 6 item */
	.item-grid-wrapper.ic4.column1-left,
	.item-grid-wrapper.ic5.column1-left,
	.item-grid-wrapper.ic6.column1-left
	{
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
		grid-template-areas:
		"igl igl igl igb4 igb1 igh igh igh"
		"igl igl igl igb5 igb2 igh igh igh"
		"igl igl igl igb6 igb3 igh igh igh";
	}
	.item-grid-wrapper.ic4.column1-right,
	.item-grid-wrapper.ic5.column1-right,
	.item-grid-wrapper.ic6.column1-right
	{
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
		grid-template-areas: 
		"igh igh igh igb1 igb4 igl igl igl"
		"igh igh igh igb2 igb5 igl igl igl"
		"igh igh igh igb3 igb6 igl igl igl"; 
	}
	
	/* 7 - 9 item */
	.item-grid-wrapper.ic7.column1-left,
	.item-grid-wrapper.ic8.column1-left,
	.item-grid-wrapper.ic9.column1-left
	{
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
		grid-template-areas: 
		"igl igl igl igb7 igb4 igb1 igh igh igh igh"
		"igl igl igl igb8 igb5 igb2 igh igh igh igh"
		"igl igl igl igb9 igb6 igb3 igh igh igh igh";
	}
	.item-grid-wrapper.ic7.column1-right,
	.item-grid-wrapper.ic8.column1-right,
	.item-grid-wrapper.ic9.column1-right
	{
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
		grid-template-areas: 

		"igh igh igh igh igb1 igb4 igb7 igl igl igl"
		"igh igh igh igh igb2 igb5 igb8 igl igl igl"
		"igh igh igh igh igb3 igb6 igb9 igl igl igl";
	}
	
	/* 10 - 12 item */
	/*
	.item-grid-wrapper.ic10.column1-right,
	.item-grid-wrapper.ic11.column1-right,
	.item-grid-wrapper.ic12.column1-right
	{
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
		grid-template-areas: 
		" igl igl igl igb1 igb4 igb7 igb10 igh igh igh "
		" igl igl igl igb2 igb5 igb8 igb11 igh igh igh "
		" igl igl igl igb3 igb6 igb9 igb12 igh igh igh ";
	}
	*/
	.item-grid-wrapper.ic10.column1-left,
	.item-grid-wrapper.ic11.column1-left,
	.item-grid-wrapper.ic12.column1-left
	{
	 grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
		grid-template-areas: 
		"igl igl igl igl igl igb9 igb5 igb1 igh igh igh igh igh igh igh"
		"igl igl igl igl igl igb10 igb6 igb2 igh igh igh igh igh igh igh"
		"igl igl igl igl igl igb11 igb7 igb3 igh igh igh igh igh igh igh"
		"igl igl igl igl igl igb12 igb8 igb4 igh igh igh igh igh igh igh"; 
	}
	.item-grid-wrapper.ic10.column1-right,
	.item-grid-wrapper.ic11.column1-right,
	.item-grid-wrapper.ic12.column1-right
	{
	 grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
		grid-template-areas: 
		"igh igh igh igh igh igh igh igb1 igb5 igb9 igl igl igl igl igl "
		"igh igh igh igh igh igh igh igb2 igb6 igb10 igl igl igl igl igl "
		"igh igh igh igh igh igh igh igb3 igb7 igb11 igl igl igl igl igl "
		"igh igh igh igh igh igh igh igb4 igb8 igb12 igl igl igl igl igl "; 
	}
}

.text-period, .collection-count {
	display: none;
}

@media (min-width: 1200px) {
	.hex-list {
		display: block;
	}
}

@media (min-width: 920px) and (max-width: 1620px) {
	.igl {
		padding: 2rem !important;
	}
	.igl {
		max-height: 400px;
	}
	.igl .collection-name {
		font-size: 1.4rem;
		line-height: 1.6rem;
		font-weight: bold;
		margin-bottom: 0.5rem;
		padding-top: 0rem;
		padding-bottom: 0rem;
	}
	.item-grid-wrapper {
		gap: var(--med-gap) var(--med-gap);
		padding-bottom: var(--med-gap);
	}
	.item-grid-wrapper .collection-summary {
		max-width: fit-content;
		width: 100%;
		margin-top: 2rem;
		letter-spacing: 0rem;
		font-size: 0.8rem;
	}
	.grid-browse-window H2 {
		font-size: 1.8rem;
		line-height: 1.8rem;
	}
}
@media (min-width: 1200px) {
	.text-period {
		display: inline;
	}
	.collection-count {
		display: block;
	}
	.collection-count-items {
		display: none;
	}
	.igl .collection-name {
		font-size: 1.8rem;
		line-height: 1.8rem;
		padding-top: 0rem;
		padding-bottom: 0rem;
	}
}