sass-site/source/assets/css/components/_hero-image.scss

.hero-lockup {
  padding: 3rem 0;
  margin: {
    right: -2rem;
    left:  -2rem;
  };
  display: grid;
  grid-template-areas: 'introduction image';
  align-items: center;

  .hero-image,
  .sl-c-introduction {
    padding: {
      right: 2rem;
      left:  2rem;
    };
  }

  .hero-image        { grid-area: image;        }
  .sl-c-introduction { grid-area: introduction; }

  @media screen and (max-width: 40em) {
    grid-template: {
      areas: "introduction"
             "image";
    };
  }
}