.buying {
  margin-bottom: 4em; }
  .buying h2 {
    padding: 0 2em 0 25vw; }
  .buying figure {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-flow: row wrap;
    -webkit-box-pack: start;
            justify-content: flex-start;
    -webkit-box-align: stretch;
            align-items: stretch;
    margin: 0; }
  .buying figure > div {
    -webkit-box-flex: 1;
            flex: 1 0 33.3%;
    max-width: 33.3%; }
    .buying figure > div img {
      height: 100%;
      width: 100%;
      -o-object-fit: cover;
         object-fit: cover; }
  .buying figcaption {
    -webkit-box-flex: 1;
            flex: 1 0 auto;
    max-width: 33.3%;
    margin-left: calc(-8.3vw + (4 * var(--step-5))); }
  @media screen and (max-width: 1170px) {
    .buying h2 {
      padding: 0 2em 0; } }
  @media screen and (max-width: 870px) {
    .buying h2 {
      padding: 0 1em 0; }
    .buying figure > div {
      -webkit-box-flex: 1;
              flex: 1 0 50%;
      max-width: 50%; }
    .buying figcaption {
      margin-left: auto;
      margin-right: auto; } }
  @media screen and (max-width: 768px) {
    .buying figure {
      padding: 0 1em; }
    .buying figure > div, .buying figcaption {
      max-width: 100%;
      -webkit-box-flex: 1;
              flex: 1 0 100%; }
    .buying figure > div {
      width: 100%;
      height: auto;
      max-height: 40vh; }
    .buying figcaption > * {
      max-width: 66.6%;
      margin-left: auto;
      margin-right: auto; } }
  @media screen and (max-width: 425px) {
    .buying figcaption > * {
      max-width: 100%; } }