<main class="ph3">
  <article class="dark-gray athelas mv5 center grid layout justify-center">

    <header class="wide-2 wide-3-m flex items-center">
      <div>
        <h2 class="fw4 f4 f3-l mv0">Men /</h2>
        <h1 class="f2 f1-l mv0 lh-copy">Laid Back Loafers &mdash;</h1>
        <p class="mt0">Summer-ready slip-ons for office and weekend wear.</p>
        <div class="w4 h2 bg-dark-blue"></div>
      </div>
    </header>

    <div class="wide-2 tall-2 overflow-hidden pointer">
      <div class="zoom bg-center cover w-100 h-100"
        style="background-image: url('//media.aldoshoes.com/v2/product/freinia/36/freinia_beige-taupe_36_look-full_rc_nt_1000x1270.jpg')"/></div>
    </div>

    <div class="overflow-hidden pointer">
      <div class="zoom bg-center cover w-100 h-100"
        style="background-image: url('//media.aldoshoes.com/v2/product/alan/36/alan_beige-taupe_36_main_rc_nt_1000x1270.jpg')"/></div>
    </div>

    <div class="overflow-hidden pointer">
      <div class="zoom bg-center cover w-100 h-100"
        style="background-image: url('//media.aldoshoes.com/v2/product/alan/97/alan_black_97_main_rc_nt_1000x1270.jpg')"></div>
    </div>

    <div class="bg-gray white fw6 flex items-center ph3 ph4-l">
      <div class="f5 f3-l lh-copy lh-title-l">
        Free pickup in store or Free shipping on all online orders!
        <hr class="bt bw1 bb-0 bl-0 br-0 b--white w2 ma0 mt3" />
      </div>
    </div>

    <div class="overflow-hidden pointer">
      <div class="zoom bg-center cover w-100 h-100"
        style="background-image: url('//media.aldoshoes.com/v2/product/wyanet/2/wyanet_blue_2_main_rc_nt_1000x1270.jpg')"></div>
    </div>

    <div class="overflow-hidden pointer">
      <div class="zoom bg-center cover w-100 h-100"
        style="background-image: url('//media.aldoshoes.com/v2/product/wyanet/36/wyanet_beige-taupe_36_main_rc_nt_1000x1270.jpg')"></div>
    </div>

    <div class="wide-2 tall-2 overflow-hidden pointer">
      <div class="zoom bg-center cover w-100 h-100"
        style="background-image: url('//media.aldoshoes.com/v2/product/freinia/22/freinia_brown_22_look-full_rc_nt_1000x1270.jpg')"></div>
    </div>

    <div class="overflow-hidden pointer">
      <div class="zoom bg-center cover w-100 h-100"
        style="background-image: url('//media.aldoshoes.com/v2/product/wyanet/97/wyanet_black_97_main_rc_nt_1000x1270.jpg')"></div>
    </div>

    <div class="overflow-hidden pointer">
      <div class="zoom bg-center cover w-100 h-100"
        style="background-image: url('//media.aldoshoes.com/v2/product/areawen/1/areawen_blue_1_main_rc_nt_1000x1270.jpg')"></div>
    </div>

    <div class="overflow-hidden pointer">
      <div class="zoom bg-center cover w-100 h-100"
        style="background-image: url('//media.aldoshoes.com/v2/product/areawen/38/areawen_beige-taupe_38_main_rc_nt_1000x1270.jpg')"></div>
    </div>

    <div class="overflow-hidden pointer">
      <div class="zoom bg-center cover w-100 h-100"
        style="background-image: url('//media.aldoshoes.com/v2/product/mccrery/36/mccrery_beige-taupe_36_main_rc_nt_1000x1270.jpg')"></div>
    </div>

    <div class="overflow-hidden pointer">
      <div class="zoom bg-center cover w-100 h-100"
        style="background-image: url('//media.aldoshoes.com/v2/product/mccrery/98/mccrery_black_98_main_rc_nt_1000x1270.jpg')"></div>
    </div>
  </article>
</main>


<a href="https://github.com/winkerVSbecks/grid-experiments"
   target="_blank"
   class="dib grow f4 pa3 lh-solid fixed bottom-1 right-1">
  <svg class="bg-white-50 br-100 dark-blue" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="1em" height="1em" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path fill-rule="nonzero" fill="currentColor" d="M8 0C3.58 0 0 3.582 0 8c0 3.535 2.292 6.533 5.47 7.59.4.075.547-.172.547-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.223 1.873.87 2.33.665.072-.517.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.953 0-.873.31-1.587.823-2.147-.09-.202-.36-1.015.07-2.117 0 0 .67-.215 2.2.82.64-.178 1.32-.266 2-.27.68.004 1.36.092 2 .27 1.52-1.035 2.19-.82 2.19-.82.43 1.102.16 1.915.08 2.117.51.56.82 1.274.82 2.147 0 3.073-1.87 3.75-3.65 3.947.28.24.54.73.54 1.48 0 1.07-.01 1.93-.01 2.19 0 .21.14.46.55.38C13.71 14.53 16 11.53 16 8c0-4.418-3.582-8-8-8 "></path></svg>
</a>

.grid { display: grid; }

/**
 * Grid Layout
 * Width = (width_of_grid - (gutters + padding)) / no_of_cols
 * Height = 1270 * width / 1000
 */
:root {
  --width: calc((100vw - 3rem) / 2);
  --height: calc(1270 * var(--width) / 1000);
}

.layout {
  grid-gap: 1rem;
  grid-auto-flow: dense;
  grid-template-columns: repeat(2, var(--width));
  grid-auto-rows: var(--height);
}

@media screen and (min-width: 30em) and (max-width: 60em) {
  :root { --width: calc((100vw - 4rem) / 3); }
  .layout { grid-template-columns: repeat(3, var(--width)); }
}

@media screen and (min-width: 60em) {
  :root { --width: calc((60em - 5rem) / 4); }
  .layout { grid-template-columns: repeat(4, var(--width)); }
}

/**
 * Col and row spans
 */
.wide-2 { grid-column-end: span 2; }
.tall-2 { grid-row-end: span 2; }

@media screen and (min-width: 30em) and (max-width: 60em) {
  .wide-3-m { grid-column-end: span 3; }
}


.zoom {
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: transform 0.3s ease-out;
}
.zoom:hover,
.zoom:focus { transform: scale(1.05); }
.zoom:active { transform: scale(1); }