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


/* mobile */
.item-grid-wrapper {
	display: grid; 
	gap: var(--med-gap) var(--med-gap);
	/* padding-bottom: var(--max-gap); */
}

.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.2rem;
}
.hover-zoom IMG:hover,.hover-zoom IMG:focus {
    transform: scale(1.1);
}
.igl {
	
}
.igl .collection-name {
	font-size: 0.95rem;
	letter-spacing: 0.25rem;
	font-weight: 500;
	line-height: 1rem;
	padding-top: 1.5rem;
	padding-bottom: 1rem;
	text-align: center;
}
.igl .collection-summary {
	font-size: 0.9rem;
}
.igl .collection-count {
	font-weight: bold;
	margin-top: 0.5rem;
}
.hex-list {
	display: none;
}

/* multiple */





		
	.item-grid-container {
		margin-top: 3rem;
		margin-left: auto;
		margin-right: auto;
		display: grid;
		grid-auto-columns: 1fr 1fr 1fr;

		gap: 80px 40px;
		grid-template-areas: ". . .";
	}




/*
.item-grid-wrapper.ic4 {
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-areas: 
		"igh igh igh igh "
		"igh igh igh igh "
		"igh igh igh igh"
		"igb1 igb2 igb3 igb4"
		"igl igl igl igl"; 
}

.item-grid-wrapper.ic5 {
	grid-template-columns: 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"
		"igh igh igh igh igh igh"
		"igb1 igb2 igb3 igb4 igb5 igb6"
		"igl igl igl igl igl igl"; 
}

.item-grid-wrapper.ic8 {
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-areas: 
		"igh igh igh igh"
		"igh igh igh igh "
		"igh igh igh igh"
		"igb1 igb2 igb3 igb4 "
		"igb5 igb6 igb7 igb8"
		"igl igl igl igl"; 
}



.item-grid-wrapper.ic2 {
	grid-template-columns: 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"
		"igh igh igh igh igh igh"
		"igb3 igb4 igb1igb2 igb5 igb6"
		"igl igl igl igl igl igl"; 
}
.item-grid-wrapper.ic4 {
	grid-template-columns: 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"
		"igh igh igh igh igh igh"
		"igb5 igb1 igb2 igb3 igb4 igb6"
		"igl igl igl igl igl igl"; 
}
*/


.item-grid-wrapper {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 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 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 igl igl igl igl igl igl";
}



.btn-view-more-collections {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    background-color: #000;
    color: #FFF;
    border-radius: 0.3rem;
    text-decoration: none !important;
	font-size: 1rem;
    letter-spacing: 0.25rem;
    line-height: 1rem;
}
.btn-library-icon {
	position: absolute;
    z-index: 1;
    right: 1.5rem;
    top: 1.5rem;
}

.igh {
	aspect-ratio: 4 / 2.5;
}



/* MOBILE BROWSE */
@media all and (max-width: 1280px) {  

	.item-grid-wrapper {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
		/* grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr; */
		gap: var(--min-gap) var(--min-gap);
		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";
	}
	.igl .collection-name {
		font-size: 0.8rem;
		letter-spacing: 0.2rem;
	}
	.item-grid-container {
		gap: 80px 1.8rem;
		
		grid-auto-columns: 1fr 1fr;
		grid-template-areas: ". .";
	}
	
}