/* Make the hero region use Flexbox */
.region--hero {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}

/* Each block inside the hero region gets half width on desktop */
.region--hero > .block {
  flex: 1 1 48%;
  min-width: 300px;
}

/* Stack blocks vertically on mobile */
@media (max-width: 768px) {
  .region--hero {
    flex-direction: column;
  }

  .region--hero > .block {
    flex: 1 1 100%;
    min-width: unset;
  }
}