.nerf-updates-hero {
	border-bottom: 1px solid var(--nerf-line);
	background:
		linear-gradient(to right, color-mix(in srgb, var(--nerf-line) 55%, transparent) 1px, transparent 1px),
		linear-gradient(to bottom, color-mix(in srgb, var(--nerf-line) 55%, transparent) 1px, transparent 1px),
		var(--nerf-surface);
	background-size: 28px 28px;
	padding: clamp(44px, 8vw, 86px) 0 34px;
}

.nerf-updates-hero h1 {
	max-width: 760px;
	margin: 0;
	font-size: clamp(42px, 8vw, 84px);
	font-weight: 950;
	line-height: 0.94;
	letter-spacing: 0;
}

.nerf-updates-hero p:not(.nerf-eyebrow) {
	max-width: 640px;
	margin: 18px 0 0;
	color: var(--nerf-muted);
	font-size: 16px;
	line-height: 1.75;
}

.nerf-updates-list {
	padding: 42px 0 68px;
}

.nerf-update-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.nerf-update-card {
	border: 1px solid var(--nerf-line);
	background: var(--nerf-surface);
}

.nerf-update-card a {
	display: block;
	min-height: 210px;
	color: inherit;
	text-decoration: none;
	padding: 20px;
}

.nerf-update-card span {
	color: var(--nerf-primary);
	font-size: 12px;
	font-weight: 850;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.nerf-update-card h2 {
	margin: 18px 0 10px;
	font-size: 22px;
	line-height: 1.2;
}

.nerf-update-card p {
	margin: 0;
	color: var(--nerf-muted);
	font-size: 14px;
	line-height: 1.65;
}

@media (max-width: 900px) {
	.nerf-update-grid {
		grid-template-columns: 1fr;
	}
}