.hero--home {
  padding-block: 28px 16px;
  display: grid;
  gap: 20px;
}

.hero__content,
.hero__panel {
  padding: 28px;
  border-radius: var(--radius-xl);
}

.hero__content {
  background: linear-gradient(145deg, rgba(27, 94, 32, 0.96), rgba(46, 125, 50, 0.88));
  color: var(--color-text-inverse);
  overflow: hidden;
  min-height: 100%;
}

.hero__content .eyebrow,
.hero__content p,
.hero__content h1 {
  color: inherit;
}

.hero__lead {
  max-width: 58ch;
  margin-top: 16px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.hero__panel {
  align-self: stretch;
  display: grid;
  align-content: center;
  gap: 12px;
}

.panel__label {
  color: var(--color-accent);
  font-weight: 700;
}

.spotlight-card {
  padding: 24px;
}

@media (min-width: 1024px) {
  .hero--home {
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.95fr);
    align-items: stretch;
    gap: 24px;
    padding-block: 44px 20px;
  }

  .hero__content,
  .hero__panel {
    padding: 36px;
  }

  .hero__content h1 {
    max-width: 10ch;
  }

  .hero__lead {
    max-width: 52ch;
    font-size: 1.08rem;
  }

  .spotlight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .spotlight-card {
    padding: 28px;
  }
}