/* Component: hero
   Template: template-parts/components/hero.php
   Values only from theme.json custom properties. */

.hero {
	padding-block: var(--wp--preset--spacing--2-xl);
	background: var(--wp--preset--color--surface);
}

.hero__inner {
	display: grid;
	gap: var(--wp--preset--spacing--lg);
	align-items: center;
}

.hero__title {
	font-size: var(--wp--preset--font-size--display);
	margin: 0 0 var(--wp--preset--spacing--sm);
}

.hero__subtitle {
	font-size: var(--wp--preset--font-size--lg);
	color: var(--wp--preset--color--muted);
	margin: 0 0 var(--wp--preset--spacing--md);
}

.hero__img {
	border-radius: var(--wp--custom--radius--lg);
}

/* md: 768px */
@media (min-width: 768px) {
	.hero__inner {
		grid-template-columns: 1.1fr 1fr;
	}
}