<main class="ph3">
<article class="dark-gray athelas mv5 center grid layout justify-center">
<header class="flex items-center">
<div>
<h2 class="fw4 f4 f3-l mv0">Men /</h2>
<h1 class="f2 f1-l mv0 lh-copy">Laid Back Loafers —</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="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="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-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)); }
}
.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); }
This Pen doesn't use any external JavaScript resources.