body { background-color: var(--headercolor2); }

.galleryintro {
	padding: 1px 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 30px;
	box-shadow: 0 -5px 5px -5px black inset;
	
	background-size: cover;
	background-position: center;
	height: clamp(150px, 20vw, 250px);
}
.galleryintro > h1 {
	color: #333;
	background: #FFFE;
	box-shadow: 0 0 20px 20px #FFFE;
	width: 100%;
}

#bigbtnholder {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	width: 95%;
	margin: -10px auto 25px;
	overflow: hidden;
	border-radius: 5px;
	filter: drop-shadow(0 1px 6px #6666);
}

.selectionbtn {
	flex-grow: 1;
	height: 500px;
	width: 20%;
	overflow: hidden;
	
	background-position: center;
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-color: white;
	transition: background-size .35s;
	
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}
.selectionbtn > h2 {
	padding: 20px 0 700px;
	width: 100%;
	margin: 0;
	background: #FFF0;
	color: white;
	font-size: clamp(14px, 3vw, 24px);
	transition: background .35s;
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
}

.selectionbtn > h2:before {
	content: "";
	background: black;
	width: 100%;
	height: clamp(59px, 10.5vw, 70px);
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	opacity: .5;
	transition: opacity .35s;
}

.selectionbtn:hover > h2, .selectionbtn:focus > h2 { background: #FFF3; }
.selectionbtn:hover > h2:before, .selectionbtn:focus > h2:before { opacity: .55; }
.selectionbtn:hover, .selectionbtn:focus { background-size: auto 105%; }
.selectionbtn:active > h2 { background: #0003; }

#bigbtnholder:has(:nth-child(5)) .selectionbtn { width: 17%; }

@media (max-width: 1300px) {
	a.selectionbtn { width: 40%; height: 400px; }
	#bigbtnholder:has(:nth-child(5)) .selectionbtn { width: 30%; }
}

@media (max-width: 750px) {
	#bigbtnholder:has(:nth-child(5)) a.selectionbtn { width: 40%; height: 270px; }
}

#naturalbtn { background-image: url(/static/img/servicepages/diamonds_nat.jpg); }
#labbtn { background-image: url(/static/img/servicepages/diamonds_lab.jpeg); }
#studbtn { background-image: url(/static/img/servicepages/diamonds_studs.jpg); }
#martinistudbtn { background-image: url(/static/img/servicepages/diamonds_studsM.jpg); }

#ringsbtn { background-image: url(/static/img/products/84842.jpg); }
#bandsbtn { background-image: url(/static/img/products/84908.jpg); }
#braceletbtn { background-image: url(/static/img/Bracelets.jpg); }
#earringbtn { background-image: url(/static/img/products/41007.jpg); }
#fashionbtn { background-image: url(/static/img/products/84987_0.jpg); }
#necklacebtn { background-image: url(/static/img/Necklaces.jpg); }
#pendantbtn { background-image: url(/static/img/icons/Psolitaire.jpg); }
#personalizedbtn { background-image: url(/static/img/products/PPD0003.jpg); }
#instockitemsbtn { background-image: url(/static/img/instockpreview.jpg); /*background-position: top center; width: 100%;*/ }
#allitemsbtn { background-image: url(/static/img/jewelrypreview.jpg); /*background-position: center; background-size: auto; width: 100%;*/ }