.k20-hero {
	background: var(--k20-gradient-contrast);
	color: var(--k20-alb);
	padding-block: var(--k20-ritm);
}

.k20-hero__grid {
	display: grid;
	gap: var(--k20-s-6);
	align-items: start;
	grid-template-columns: minmax(0, 1fr);
}

.k20-hero h1 {
	max-width: 24ch;
	margin-bottom: 0;
	color: var(--k20-alb);
	font-size: var(--k20-fs-h2);
	line-height: var(--k20-lh-tight);
}

.k20-hero h1::after {
	content: "";
	display: block;
	width: 4.5rem;
	height: 0.3125rem;
	margin-top: var(--k20-s-5);
	background: var(--k20-turcoaz);
	border-radius: var(--k20-radius-full);
}

.k20-hero :focus-visible {
	outline-color: var(--k20-focus-pe-inchis);
}

@media (min-width: 64em) {
	.k20-hero h1 {
		max-width: 28ch;
		font-size: var(--k20-fs-h1);
	}
}