Services Alternating Rows

<!--
  The zigzag is decoration, not meaning: the source order is always copy then
  image, and only CSS moves the picture to the other side. Reversing the DOM to
  get the visual would hand a keyboard and a screen reader a different reading
  order than the one on screen - the classic failure of this layout.
-->
<section class="svc-alt" aria-labelledby="svc-alt-title">
  <h2 class="svc-alt__title" id="svc-alt-title">How we work with you</h2>

  <div class="svc-alt__row">
    <div class="svc-alt__copy">
      <p class="svc-alt__kicker">Discovery</p>
      <h3 class="svc-alt__row-title">Understand before we build</h3>
      <p class="svc-alt__text">
        Two weeks of interviews, analytics and a hard look at what you already own.
      </p>
      <a class="svc-alt__link" href="/services/discovery">Explore discovery</a>
    </div>
    <div class="svc-alt__media">
      <img src="/promo/all-access.svg" alt="" width="560" height="420" />
    </div>
  </div>

  <div class="svc-alt__row svc-alt__row--reverse">
    <div class="svc-alt__copy">
      <p class="svc-alt__kicker">Delivery</p>
      <h3 class="svc-alt__row-title">Ship in fortnightly slices</h3>
      <p class="svc-alt__text">
        Every increment is deployable, typed and behind a flag you control.
      </p>
      <a class="svc-alt__link" href="/services/delivery">Explore delivery</a>
    </div>
    <div class="svc-alt__media">
      <img src="/promo/all-access.svg" alt="" width="560" height="420" />
    </div>
  </div>
</section>