/* Hero */

h1 span { color: var(--sun); }
.hero { padding-block: var(--space-xl) var(--space-lg); overflow: hidden; }
.hero-inner {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}
.hero-lede { margin-top: var(--space-sm); color: var(--bland); max-width: 34em; font-size: 1.05rem; }
.hero-location { margin-top: var(--space-sm); font-family: var(--font-mono); font-size: 0.85rem; color: var(--bland); }

.hero-art { position: relative; justify-self: center; width: 100%; max-width: 20rem; }

@media (min-width: 56em) {
  .hero-inner { grid-template-columns: 1.15fr 0.85fr; }
  .hero-art { max-width: none; }
}