.hero {
  background-color: #f8f9fa;
  color: #212529;
  position: relative; }

.region-hero {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto; }
  @media (min-width: 576px) {
    .region-hero {
      max-width: 540px; } }
  @media (min-width: 768px) {
    .region-hero {
      max-width: 720px; } }
  @media (min-width: 992px) {
    .region-hero {
      max-width: 960px; } }
  @media (min-width: 1200px) {
    .region-hero {
      max-width: 1140px; } }
  @media (min-width: 1260px) {
    .region-hero {
      max-width: 1260px; } }
  @media (min-width: 1360px) {
    .region-hero {
      max-width: 1360px; } }
  @media (min-width: 1760px) {
    .region-hero {
      max-width: 1760px; } }
  .page-variant--homepage .region-hero {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "heading" "subheading";
    grid-gap: 1.5vmax 3vmax; }
    @media (min-width: 992px) {
      .page-variant--homepage .region-hero {
        grid-template-areas: "heading banner" "subheading banner";
        grid-template-columns: 1fr minmax(auto, 60%); } }
    .page-variant--homepage .region-hero > .node__title {
      grid-area: heading;
      margin: 0;
      align-self: flex-end;
      z-index: 1; }
    .page-variant--homepage .region-hero > .node__subtitle {
      grid-area: subheading;
      z-index: 1; }
    .page-variant--homepage .region-hero > .node__banner {
      grid-row: 1 / 3;
      grid-column: 1 / 2;
      z-index: 0; }
      @media (min-width: 992px) {
        .page-variant--homepage .region-hero > .node__banner {
          grid-area: banner; } }