<div class="container">
  <div class="section-heading">
    <h2 class="sticky-heading"> THE STAHL HOUSE: AN ARCHITECTURAL ICON
</h2>
  </div>
  
  <div class="product-grid grid-half">
    <div class="product-card">
      <img src="https://cdn.vox-cdn.com/thumbor/m92NXxhCsRIpmqbR9Uc3cbjSMq4=/0x0:3000x2380/1920x0/filters:focal(0x0:3000x2380):format(webp):no_upscale()/cdn.vox-cdn.com/uploads/chorus_asset/file/9102373/gri_2004_r_10_b199_2980_02k.jpg" alt="">
    </div>
    <div class="product-card">
      <img src="https://d7hftxdivxxvm.cloudfront.net/?resize_to=fit&width=612&height=800&quality=80&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FSzkhYBxrXcPA26zPweupag%2Fnormalized.jpg" alt="">
    </div>
    <div class="product-card">
      <img src="https://cdn.vox-cdn.com/thumbor/EVp3ZCPAQTkBjL7Up4sfk5YdtDY=/0x0:2335x2950/1720x0/filters:focal(0x0:2335x2950):format(webp):no_upscale()/cdn.vox-cdn.com/uploads/chorus_asset/file/9102383/gri_2004_r_10_b199_2980_09k.jpg" alt="">
    </div>
    <div class="product-card">
      <img src="https://cdn.vox-cdn.com/thumbor/lVx7jD1y9GyBume8u5jJfpyoEwY=/0x0:3000x2383/1920x0/filters:focal(0x0:3000x2383):format(webp):no_upscale()/cdn.vox-cdn.com/uploads/chorus_asset/file/9102405/gri_2004_r_10_b199_2980_13k.jpg" alt="">
    </div>
    <div class="product-card">
      <img src="https://cdn.vox-cdn.com/thumbor/hx5CLak_q6U6kwv3euYaX8zIJ3c=/0x0:3000x2369/1920x0/filters:focal(0x0:3000x2369):format(webp):no_upscale()/cdn.vox-cdn.com/uploads/chorus_asset/file/9102449/gri_2004_r_10_b199_2980_19k.jpg" alt="">
    </div>
    <div class="product-card">
      <img src="https://cdn.vox-cdn.com/thumbor/BW0k6GnfZjj2rfYOIdYAmp3R6_Q=/0x0:2899x2021/1920x0/filters:focal(0x0:2899x2021):format(webp):no_upscale()/cdn.vox-cdn.com/uploads/chorus_asset/file/9102365/gri_2004_r_10_b190_f006_2980_05.jpg" alt="">
    </div>
  </div>
</div>

<div class="container">
  <div class="section-heading">
    <h2 class="sticky-heading">“If you don’t know the Stahl house, then you don’t know mid century modern architecture.”</h2>
  </div>
  
  <div class="product-grid grid-full">
    <div class="product-card">
      <img src="https://cdn.vox-cdn.com/thumbor/6tv5NduvYDMQPnOQWu8ki-haifk=/0x0:2905x2326/3570x2008/filters:focal(1221x931:1685x1395):format(webp)/cdn.vox-cdn.com/uploads/chorus_image/image/56342955/gri_2004_r_10_b190_f007_2980_17.0.jpg" alt="">
    </div>
    <div class="product-card">
      <img src="https://cdn.vox-cdn.com/thumbor/m92NXxhCsRIpmqbR9Uc3cbjSMq4=/0x0:3000x2380/1920x0/filters:focal(0x0:3000x2380):format(webp):no_upscale()/cdn.vox-cdn.com/uploads/chorus_asset/file/9102373/gri_2004_r_10_b199_2980_02k.jpg" alt="">
    </div>
    <div class="product-card">
      <img src="https://www.lindamay.com/wp-content/uploads/2016/09/14199357_1127305457335963_3873754177369931263_n.jpg" alt="">
    </div>
    <div class="product-card">
      <img src="https://2.bp.blogspot.com/-BP994MZwz_M/WePirH45M9I/AAAAAAAAItA/hYles3yVERk0-MGSmRAfkNSUcgUu3VYvgCLcBGAs/s1600/IMG_5780.jpg" alt="">
    </div>
  </div>
</div>

*{ box-sizing: border-box; }

html, body{
  padding: 0;
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
}

.container{
  display: flex;
  padding: 20vh 0 15vh 0;
}

.section-heading{
  padding: 0 2.5%;
  width: 40%;
}

.sticky-heading{
  position: sticky;
  top: 25px;
  margin: 0;
  font-size: 48px;
}

.product-grid{
  display: flex;
  flex-wrap: wrap;
  width: 60%;

  &.grid-half{
    > div{ width: 50%; }
  }
  
  &.grid-full{
    > div{ width: 100%; }
  }  
}

.product-card{
  padding: 0 25px;
  margin-bottom: 50px;
  
  img{
    display: block;
    width: 100%;
    height: 500px;
    object-fit: cover;
    filter: grayscale(1);
  }
}