.grav-c-hero {
  text-align: center;

  .grav-c-hero__banner {
    display: block;
    width: 100%;
    height: 26.5rem;
    object-fit: cover;
    object-position: center;
  }

  .grav-c-hero__container {
    @include grav-color-apply('background-color', 'a', 'neutral');

    // The amount by which the container overlaps the image:
    $container-vertical-shift: 3.5rem;

    // The width to which the horizontal gaps between the container
    // and the boundary of the content area can grow:
    $container-horizontal-max-margin: 4rem;

    // The width to which the horizontal gap between the container and
    // the content within it can grow:
    $container-horizontal-max-inset: 5rem;

    width: calc(100% - #{$grav-sp-m * 2});
    max-width: $grav-page-content-max-width - ($container-horizontal-max-margin * 2);
    position: relative; // Needed to let container DIV overlap banner IMG element
    margin: (-1 * $container-vertical-shift) auto 0;
    padding: $container-vertical-shift $grav-sp-m $grav-sp-m $grav-sp-m;

    > * {
      max-width: $grav-page-content-max-width - ($container-horizontal-max-margin * 2) - ($container-horizontal-max-inset * 2);
      margin-right: auto;
      margin-left: auto;
    }
  }
}