.zebra {
  margin: $spacing-md 0 $spacing-xl;

  &__row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    overflow: hidden; // required for border-radius
    background: linear-gradient(to right, $offwhite 50%, white);
    border-bottom-left-radius: $border-radius-lg;

    @media (min-width: 40rem) {
      border-bottom-left-radius: $spacing-3xl;
    }

    &:where(:nth-child(even)) {
      flex-direction: row-reverse;
      background: linear-gradient(to left, $offwhite 50%, white);
      border-bottom-left-radius: 0;
      border-bottom-right-radius: $border-radius-lg;

      @media (min-width: 40rem) {
        border-bottom-right-radius: $spacing-3xl;
      }
    }
  }

  &__figure {
    position: relative;
    margin: 0;
    flex: 1 0 50%;
    align-self: stretch;
    z-index: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;

    @supports (object-fit: cover) {
      align-items: stretch;
    }

    img {
      @supports (object-fit: cover) {
        object-fit: cover;
        object-position: center center;
        height: 100%;
      }
    }
  }

  &__body {
    flex: 1 1 20em;
    margin: $spacing-md 0 $spacing-xl;
    min-width: 50%;
    box-sizing: border-box;
    @include box__padding;
    z-index: 0;

    > {
      *:first-child {
        margin-top: 0;
      }

      *:last-child {
        margin-bottom: 0;
      }
    }
  }
}