.tech-stack {
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.tech-stack__eyebrow {
	margin: 0;
	font: var(--label-m);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--color-brand);
}
.tech-stack__list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.tech-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 64px;
	padding: 0 12px;
	background: var(--gradient-case-pill);
	border: 1.5px solid var(--color-grid);
	border-radius: var(--radius-pill);
	font: 400 var(--text-base) / 1.4 var(--font-sans);
	color: var(--color-cream);
	white-space: nowrap;
}
.tech-pill__icon {
	position: relative;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-cream);
}
.tech-pill__icon::after {
	content: "";
	position: absolute;
	inset: 9px;
	background: var(--color-black);
	mask: var(--tech-icon) center / contain no-repeat;
}
@media (max-width: 767px) {
	.tech-stack {
		gap: 20px;
	}
	.tech-stack__eyebrow {
		font-size: var(--text-lg);
	}
	.tech-stack__list {
		gap: 8px;
	}
	.tech-pill {
		height: 42px;
		padding: 0 14px 0 6px;
		gap: 8px;
		background: linear-gradient(
			180deg,
			var(--color-black) 0%,
			var(--color-sand) 100%
		);
		border: 1px solid var(--color-pill-edge);
		font-size: var(--text-sm);
		line-height: 1.35;
	}
	.tech-pill__icon {
		width: 28px;
		height: 28px;
	}
	.tech-pill__icon::after {
		inset: 6px;
	}
}