/*
  Balance pass: the approved hero columns remain in place while the action
  group becomes a shared base beneath both Homer and the headline.
*/

.hero-content {
  grid-template-areas:
    "portrait copy"
    "actions actions";
  grid-template-rows: auto auto;
  row-gap: 1.15rem;
}

.hero-actions {
  grid-area: actions;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-self: start;
  width: 100%;
  max-width: none;
  margin-top: 0;
}

.hero-actions .magic-button {
  width: 100%;
  justify-content: flex-start;
}

@media (max-width: 900px) {
  .hero-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .hero-content {
    grid-template-areas:
      "portrait"
      "copy"
      "actions";
    row-gap: .35rem;
  }
}

@media (max-width: 440px) and (max-height: 680px) {
  .hero-content {
    row-gap: .15rem;
  }
}