/* ═══════════════════════════════════════════════════════════════
   Icon grid band — 1728x302 desktop / 390x544 mobile.

   Icon 114px tall with the label centred on top of it. At rest the
   label reads over a ghosted icon; on hover the icon comes up and the
   label fades out — the "Oil & gas" cell in the design is drawn in
   the hovered state.
   ═══════════════════════════════════════════════════════════════ */
.icon-grid-band__band {
	background: var(--gd-blue);
	padding-bottom: clamp(30px, 15.42px + 3.7369vw, 80px);
	padding-top: clamp(40px, 36.21px + 0.9716vw, 53px);
}

.icon-grid-band__intro {
	color: var(--gd-white);
	font-size: var(--gd-eyebrow);
	font-weight: var(--gd-regular);
	line-height: var(--gd-eyebrow-lh);
	margin: 0 auto;
	max-width: 588px;
	padding: 0;
	text-align: center;
}

.icon-grid-band__grid {
	display: grid;
	gap: 30px 20px;
	grid-template-columns: repeat(6, 1fr);
	list-style: none;
	margin: clamp(20px, 17.96px + 0.5232vw, 27px) 0 0;
	padding: 0;
}

.icon-grid-band__item {
	align-items: center;
	cursor: pointer;
	display: grid;
	justify-items: center;
	padding: 0;
	position: relative;
}

.icon-grid-band__item > * {
	grid-area: 1 / 1;
}

.icon-grid-band__icon {
	background-color: var(--gd-white);
	display: block;
	height: 114px;
	-webkit-mask-image: var(--gd-icon);
	mask-image: var(--gd-icon);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	opacity: 0.3;
	transition: opacity 0.35s var(--gd-ease), transform 0.35s var(--gd-ease);
	width: 100%;
}

.icon-grid-band__label {
	color: var(--gd-white);
	font-size: 22px;
	font-weight: var(--gd-heavy);
	line-height: 30px;
	text-align: center;
	transition: opacity 0.35s var(--gd-ease);
	z-index: 1;
}

.icon-grid-band__item:hover .icon-grid-band__icon,
.icon-grid-band__item:focus-within .icon-grid-band__icon {
	opacity: 1;
	transform: scale(1.04);
}

.icon-grid-band__item:hover .icon-grid-band__label,
.icon-grid-band__item:focus-within .icon-grid-band__label {
	opacity: 0.1;
}

@media (max-width: 1400px) {
	.icon-grid-band__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 767px) {
	.icon-grid-band__grid {
		gap: 30px 10px;
		grid-template-columns: repeat(2, 1fr);
	}
}