// This needs refactoring to support other contexts

.fizz-hero {
  margin-top: $spacing-32;
  background-color: $color-background-surface;
  display: grid;
  grid-template-rows: 80px auto;
  align-items: center;
  justify-content: center;
  padding: $spacing-32;
  grid-gap: $spacing-16;
  margin-left: $gutter-medium;
  margin-right: $gutter-medium;
  max-height: 500px;
}

.fizz-hero img {
  max-height: 100%;
}

@media (min-width: $breakpoint-m) {
  .fizz-hero {
    margin-top: $spacing-64;
    grid-template-columns: minmax(auto, 500px) minmax(min-content, 400px);
    grid-template-rows: minmax(auto, $spacing-64) 1fr minmax(auto, $spacing-64);
    padding: $gutter-medium;
  }

  .fizz-hero img,
  .fizz-hero svg {
    grid-column-start: 2;
    grid-row-start: 2;
  }
  .fizz-hero figcaption {
    grid-column-start: 1;
    grid-row-start: 2;
  }

}