.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"; }; } }