.marketing {
  padding: 6em 3em; }
  .marketing h2 {
    margin-left: 2em; }
  .marketing > div {
    max-width: 40%;
    margin-left: calc(6 * var(--step-5)); }
  .marketing figure {
    margin: 0;
    display: grid;
    grid-template-columns: 40% 60%;
    grid-template-rows: 1fr 1fr;
    grid-gap: 1em;
    grid-template-areas: 'portrait2 portrait' 'portrait2 portrait' 'portrait2 landscape' '. landscape'; }
    .marketing figure img {
      width: 100%;
      height: auto;
      -o-object-fit: cover;
         object-fit: cover; }
  .marketing .portrait:first-of-type {
    grid-area: portrait;
    width: 50%;
    justify-self: end; }
  .marketing .portrait:nth-of-type(2) {
    grid-area: portrait2;
    align-self: center; }
  .marketing .landscape {
    grid-area: landscape; }
  @media screen and (max-width: 860px) {
    .marketing h2 {
      margin-left: 0; }
    .marketing > div {
      max-width: 60%;
      margin-left: calc(4 * var(--step-5)); } }
  @media screen and (max-width: 768px) {
    .marketing > div {
      max-width: 100%;
      margin: 0; } }
  @media screen and (max-width: 690px) {
    .marketing h2 {
      font-size: var(--step-3); } }
  @media screen and (max-width: 470px) {
    .marketing h2 {
      font-size: var(--step-2); }
    .marketing figure {
      grid-template-columns: 1fr 1fr;
      grid-template-areas: 'portrait2 portrait' 'portrait2 portrait' 'landscape landscape'; }
    .marketing .portrait:first-of-type {
      grid-area: portrait;
      width: 100%;
      justify-self: end; }
      .marketing .portrait:first-of-type img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover; }
    .marketing .portrait:nth-of-type(2) {
      width: 100%;
      height: 100%; }
      .marketing .portrait:nth-of-type(2) img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover; } }
  @media screen and (max-width: 375px) {
    .marketing {
      padding: 3em 1em; } }