.hero-lockup {
  padding: sl-px-to-rem(48px) 0;
  margin: {
    right: -sl-px-to-rem(32px);
    left:  -sl-px-to-rem(32px);
  };
  display: grid;
  grid-template-areas: 'introduction image';
  align-items: center;

  .hero-image,
  .sl-c-introduction {
    padding: {
      right: sl-px-to-rem(32px);
      left:  sl-px-to-rem(32px);
    };
  }

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

  @media screen and (max-width: #{sl-px-to-em(640px)}) {
    grid-template: {
      areas: "introduction"
             "image";
    };
  }
}