/*
  Final placement correction for the heart-message panel.
  The countdown remains absolutely positioned inside Homer's portrait.
  This panel is the separate translucent quote box and belongs below Homer.
*/

@media (min-width: 721px) {
  .hero-content {
    grid-template-areas:
      "portrait heading"
      "heart intro"
      "actions actions";
    grid-template-rows: auto auto auto;
  }

  .homer-portrait { grid-area: portrait; }
  .hero-heading { grid-area: heading; }
  .hero-heart { grid-area: heart; margin: 0; }
  .hero-intro { grid-area: intro; margin: 0; }
  .hero-actions { grid-area: actions; }
}

@media (max-width: 720px) {
  .hero-content {
    grid-template-areas:
      "portrait"
      "actions"
      "heading"
      "intro"
      "heart";
  }

  .hero-heart { grid-area: heart; }
}