Cacher is the code snippet organizer for pro developers

// Layout 2x.

// Import site utilities.
@import '../../00-global/utils/init';

.l-2x {

  .l-container {

    @include breakpoint($bp-sm) {
      display: flex;
      // Catch-all for items beyond 2x.
      flex-wrap: wrap;
    }

    > * {

      @include breakpoint($bp-sm) {
        flex: 0 1 50%;
      }

      // On mobile, all items, except last child, get a margin-bottom.
      &:not(:last-child) {
        margin-bottom: 1rem;

        @include breakpoint($bp-sm) {
          margin-bottom: 0;
        }
      }

      // As a catch-all, on desktop,
      // all items after the standard 2 get a margin-top.
      &:nth-child(1n + 3) {

        @include breakpoint($bp-sm) {
          margin-top: 1rem;
        }
      }
    }
  }
}

{#
  This file is intended to only provide an
  example presentation of l-2x.
  The l-2x__items may not be needed in basic implementations. :)
#}
<div class="l-2x">
  <div class="l-container">
    <div class="l-2x__item"><img src="https://via.placeholder.com/250x250.png?text=2x+Layout+Item" alt="Placeholder" style="display:block;height:100%;max-height:250px;max-width:250px;width:100%;" /></div>
    <div class="l-2x__item"><img src="https://via.placeholder.com/250x250.png?text=2x+Layout+Item" alt="Placeholder" style="display:block;height:100%;max-height:250px;max-width:250px;width:100%;" /></div>
  </div>
</div>