<main class="website">
  
  <header class="section section--fullwidth section--header">
    <nav class="nav">
      <div class="nav__brand"></div>
      <ul class="nav__menu">
        <li class="nav__item"></li>
        <li class="nav__item"></li>
        <li class="nav__item"></li>
        <li class="nav__item"></li>
      </ul>
    </nav>
  </header>
  
  <section class="section section--fullwidth section--hero">
    <div class="hero">
      <div class="box">
        <div class="box__inner">
          <picture>
            <source media="(max-width: 767px)" srcset="https://i.twic.pics/v1/cover=1:1/resize=300/https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/tp-rasp.jpg 300w, https://i.twic.pics/v1/cover=1:1/resize=500/https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/tp-rasp.jpg 500w, https://i.twic.pics/v1/cover=1:1/resize=700/https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/tp-rasp.jpg 700w, https://i.twic.pics/v1/cover=1:1/resize=900/https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/tp-rasp.jpg 900w">
            <source media="(min-width: 992px)" srcset="https://i.twic.pics/v1/cover=16:4/resize=1000/https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/tp-rasp.jpg 1000w, https://i.twic.pics/v1/cover=16:4/resize=1500/https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/tp-rasp.jpg 1500w, https://i.twic.pics/v1/cover=16:4/resize=1900/https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/tp-rasp.jpg 1900w">
            <source media="(min-width: 768px)" srcset="https://i.twic.pics/v1/cover=16:9/resize=800/https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/tp-rasp.jpg 800w, https://i.twic.pics/v1/cover=16:9/resize=1000/https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/tp-rasp.jpg 1000w, https://i.twic.pics/v1/cover=16:9/resize=1200/https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/tp-rasp.jpg 1200w">
            <img src="https://i.twic.pics/v1/cover=16:9/resize=1024/https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/tp-rasp.jpg" alt="hero">
          </picture>
        </div>
      </div>
    </div>
  </section>
  
  <section class="section section--fullwidth section--thumbnails">
    <div class="thumbs">
      <div class="thumbs__item">
        <div class="box box--16-9">
          <div class="box__inner twic" data-background="url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/tp-cereals.jpg)" style="background-image: url(https://i.twic.pics/v1/cover=16:9/resize=200/https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/tp-cereals.jpg)"></div>
        </div>
      </div>
      <div class="thumbs__item">
        <div class="box box--16-9">
          <div class="box__inner twic" data-background="url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/tp-artichoke.jpg)" style="background-image: url(https://i.twic.pics/v1/cover=16:9/resize=200/https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/tp-artichoke.jpg)"></div>
        </div>
      </div>
      <div class="thumbs__item">
        <div class="box box--16-9">
          <div class="box__inner twic" data-background="url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/tp-castle.jpg)" style="background-image: url(https://i.twic.pics/v1/cover=16:9/resize=200/https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/tp-castle.jpg)"></div>
        </div>
      </div>
      <div class="thumbs__item">
        <div class="box box--16-9">
          <div class="box__inner twic" data-background="url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/tp-canyon.jpg)" style="background-image: url(https://i.twic.pics/v1/cover=16:9/resize=200/https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/tp-canyon.jpg)"></div>
        </div>
      </div>      
    </div>
  </section>
  
  <section class="section section--cta">
    <button class="button">Call to action</button>
  </section>
  
  <section class="section section--articles">
    <div class="section__row">
      <h2 class="section__title">Lorem ipsum dolor sit amet</h2>
    </div>
    <div class="section__row">
      <div class="article">
        <div class="article__figure">
          <div class="box box--4-3">
            <div class="box__inner twic" data-background="url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/tp-rasp.jpg)" style="background-image: url(https://i.twic.pics/v1/cover=4:3/resize=2p/https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/tp-rasp.jpg)"></div>
          </div>
        </div>
        <div class="article__text article__text--right">
          <h3>Lorem ipsum dolor sit amet</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent condimentum consectetur est, ac scelerisque enim ultrices in. Proin consectetur tortor et sem tincidunt, at fringilla massa vestibulum. Duis eget tempor eros. Sed porttitor scelerisque leo, nec tempus enim luctus sed. Vivamus eget arcu quis nisl laoreet porttitor in et lacus. Morbi ultricies interdum vehicula. Donec nulla ante, gravida at lobortis vitae, vestibulum sed ipsum. Maecenas ultricies cursus arcu, facilisis pharetra purus rhoncus sed. Suspendisse potenti.</p>
        </div>
      </div>
    </div>
    <div class="section__row">
      <div class="article">
        <div class="article__figure">
          <div class="box box--4-3">
            <div class="box__inner twic" data-background="url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/tp-snow.jpg)" style="background-image: url(https://i.twic.pics/v1/cover=4:3/resize=2p/https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/tp-snow.jpg)"></div>
          </div>
        </div>
        <div class="article__text article__text--left">
          <h3>Lorem ipsum dolor sit amet</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent condimentum consectetur est, ac scelerisque enim ultrices in. Proin consectetur tortor et sem tincidunt, at fringilla massa vestibulum. Duis eget tempor eros. Sed porttitor scelerisque leo, nec tempus enim luctus sed. Vivamus eget arcu quis nisl laoreet porttitor in et lacus. Morbi ultricies interdum vehicula. Donec nulla ante, gravida at lobortis vitae, vestibulum sed ipsum. Maecenas ultricies cursus arcu, facilisis pharetra purus rhoncus sed. Suspendisse potenti.</p>
        </div>
      </div>
    </div>
  </section>
  
  <section class="section section--fullwidth section--grid">
    <div class="section__row">
      <h2 class="section__title">Lorem ipsum dolor sit amet</h2>
    </div>
    <div class="section__row">
      <div class="grid">
        <div class="grid__item">
          <div class="figure">
            <div class="figure__media">
              <div class="box">
                <div class="box__inner">
                  <img class="twic" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/tp-doggy.jpg" data-src-transform="cover">
                </div>
              </div>
            </div>
            <div class="figure__caption">
              <h3>Lorem ipsum</h3>
            </div>
          </div>
        </div>
        <div class="grid__item">
          <div class="figure">
            <div class="figure__media">
              <div class="box">
                <div class="box__inner">
                  <img class="twic" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/tp-friend.jpg" data-src-transform="cover">
                </div>
              </div>
            </div>
            <div class="figure__caption">
              <h3>Lorem ipsum</h3>
            </div>
          </div>
        </div>
        <div class="grid__item">
          <div class="figure">
            <div class="figure__media">
              <div class="box">
                <div class="box__inner">
                  <img class="twic" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/tp-lake.jpg" data-src-transform="cover">
                </div>
              </div>
            </div>
            <div class="figure__caption">
              <h3>Lorem ipsum</h3>
            </div>
          </div>
        </div>
        <div class="grid__item">
          <div class="figure">
            <div class="figure__media">
              <div class="box">
                <div class="box__inner">
                  <img class="twic" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/tp-lion.jpg" data-src-transform="cover">
                </div>
              </div>
            </div>
            <div class="figure__caption">
              <h3>Lorem ipsum</h3>
            </div>
          </div>
        </div>
        <div class="grid__item">
          <div class="figure">
            <div class="figure__media">
              <div class="box">
                <div class="box__inner">
                  <img class="twic" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/tp-moth.jpg" data-src-transform="cover">
                </div>
              </div>
            </div>
            <div class="figure__caption">
              <h3>Lorem ipsum</h3>
            </div>
          </div>
        </div>
        <div class="grid__item">
          <div class="figure">
            <div class="figure__media">
              <div class="box">
                <div class="box__inner">
                  <img class="twic" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/tp-pug.jpg" data-src-transform="cover">
                </div>
              </div>
            </div>
            <div class="figure__caption">
              <h3>Lorem ipsum</h3>
            </div>
          </div>
        </div>
        <div class="grid__item">
          <div class="figure">
            <div class="figure__media">
              <div class="box">
                <div class="box__inner">
                  <img class="twic" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/tp-rasp.jpg" data-src-transform="cover">
                </div>
              </div>
            </div>
            <div class="figure__caption">
              <h3>Lorem ipsum</h3>
            </div>
          </div>
        </div>
        <div class="grid__item">
          <div class="figure">
            <div class="figure__media">
              <div class="box">
                <div class="box__inner">
                  <img class="twic" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/tp-snow.jpg" data-src-transform="cover">
                </div>
              </div>
            </div>
            <div class="figure__caption">
              <h3>Lorem ipsum</h3>
            </div>
          </div>
        </div>
        <div class="grid__item">
          <div class="figure">
            <div class="figure__media">
              <div class="box">
                <div class="box__inner">
                  <img class="twic" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/tp-write.jpg" data-src-transform="cover">
                </div>
              </div>
            </div>
            <div class="figure__caption">
              <h3>Lorem ipsum</h3>
            </div>
          </div>
        </div>
        <div class="grid__item">
          <div class="figure">
            <div class="figure__media">
              <div class="box">
                <div class="box__inner">
                  <img class="twic" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/tp-cafe.jpg" data-src-transform="cover">
                </div>
              </div>
            </div>
            <div class="figure__caption">
              <h3>Lorem ipsum</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  
</main>
@import url('https://fonts.googleapis.com/css?family=Nova+Mono|Lato|Oswald');

@import "breakpoint";

// breakpoints
$breakpoint-from-tablet: 768px;
$breakpoint-from-desktop: 992px;
$breakpoint-from-desktop-lrg: 1200px;

// colors
$color-brand-darkest: #2c233f;
$color-brand-darker: #342d4e;
$color-brand: #393254;
$color-brand-lighter: #40375c;
$color-brand-lightest: #5a4f7c;
$color-text: lighten($color-brand-lightest, 40%);

// helpers
@mixin aspect-ratio($width, $height) {
  position: relative;
  &:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: ($height / $width) * 100%;
  }
  > * {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

*, *:before, *:after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
    
  @include breakpoint($breakpoint-from-desktop) {
    font-size: 18px;
  }
    
  @include breakpoint($breakpoint-from-desktop-lrg) {
    font-size: 20px;
  }
}

body {
  background-color: $color-brand-darkest;
  font-family: "Lato", sans-serif;
  color: $color-text;
}

h1, h2, h3 {
  font-family: "Oswald", sans-serif;
}

.website {
  background-color: $color-brand-darker;
  margin: 20px;
  border-radius: 20px;
  //max-width: 960px;
}

.section {
  padding: 20px;
  max-width: 960px;
  margin: auto;
  
  &--fullwidth {
    max-width: 100%;
  }
  
  &__row:not(:last-child) {
    margin-bottom: 20px;
  }
  
  &__title {
    text-align: center;
    text-transform: uppercase;
  }
}

.nav {
  display: flex;
  justify-content: space-between;
  
  &__brand {
    min-width: 160px;
    min-height: 80px;
    background-color: $color-brand-lightest;
    border-radius: 10px;
    margin: auto;
    
    @include breakpoint($breakpoint-from-tablet) {
      margin: 0;
    }
  }
  
  &__menu {
    display: none;
    @include breakpoint($breakpoint-from-tablet) {
      display: flex;
      justify-content: flex-end;
    }
    margin: 0;
    padding: 0;
  }
  
  &__item {
    display: block;
    list-style: none;
    min-width: 80px;
    min-height: 30px;
    background-color: $color-brand-lightest;
    border-radius: 20px;
    margin: auto 10px;
  }
}

.button {
  display: block;
  margin: auto;
  border: none;
  border-radius: 20px;
  background-color: #f5a623;
  text-transform: uppercase;
  font-weight: bold;
  color: white;
  padding: 20px 50px;
}

.box {
  @include aspect-ratio(1, 1);
  background-color: $color-brand-lightest;
  border-radius: 20px;
  overflow: hidden;
  
  &--16-9 {
    @include aspect-ratio(16, 9);

    .box__inner {
      &:after {
        content: "aspect ratio: 16:9";
      }
    }
  }

  &--4-3 {
    @include aspect-ratio(4, 3);

    .box__inner {
      
      &:after {
        content: "aspect ratio: 4:3";
      }
    }
  }
  
  &__inner {
    background-size: cover;
    border-radius: 20px;
    overflow: hidden;
    z-index: 0;
    
    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      border-radius: 20px;
      //box-shadow: inset 0 0 10px #000000;
      //background-color: rgba($color-brand-darkest,.25);
      //transition: background-color .5s;
      //will-change: background-color;
      z-index: 1;
    }
    
    &:after {
      content: "aspect ratio: 1:1";
      position: absolute;
      bottom: 20px;
      right: 20px;
      font-family: 'Nova Mono', monospace;
      font-size: .6em;
      color: white;
    }
  }
}

.box:hover .box__inner:before {
  //background-color: rgba($color-brand-darkest, 0);
}

.section--thumbnails {
  display: none;
  @include breakpoint($breakpoint-from-tablet) {
    display: block;
  }
}

.hero {
  
  .box {
    @include breakpoint($breakpoint-from-tablet) {
      @include aspect-ratio(16, 9);
    }
    @include breakpoint($breakpoint-from-desktop) {
      @include aspect-ratio(16, 4);
    }

    .box__inner {
      
      img {
        width: 100%;
      }
      
      &:after {
        @include breakpoint($breakpoint-from-tablet) {
          content: "aspect ratio: 16:9";
        }
        @include breakpoint($breakpoint-from-desktop) {
          content: "aspect ratio: 16:4";
        }
      }
    }
  }
}

.thumbs {
  display: flex;
  justify-content: space-between;

  &__item {
    flex-basis: 24%;
  }
}

.article {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  
  &__figure {
    flex: 1 100%;
    @include breakpoint($breakpoint-from-desktop) {
      flex: 1 0;
    }
    
    .box, .box__inner {
      border-radius: 0;
    }
    
    .twic {
      transform: scale(1);
      filter: blur(25px);
      will-change: filter;
      transition: filter .2s;
      
      &.twic-done, &.twic-background-done {
        filter: blur(0);
      }
    }
  }
  
  &__text {
    flex: 1 100%;
    text-align: justify;
    margin-top: 20px;
    @include breakpoint($breakpoint-from-desktop) {
      flex: 2 0;
      margin-top: 0;
    }
    
    &--left {
      @include breakpoint($breakpoint-from-desktop) {
        order: -1;
        padding-right: 40px;
      }
    }
    
    &--right {
      @include breakpoint($breakpoint-from-desktop) {
        padding-left: 40px;
      }      
    }
    
    p {
      margin-top: 0;
    }
    
    h3 {
      margin-top: 0;
      margin-bottom: .5em;
    }
  }
}

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;

  &__item {
    flex: 0 calc(50% - 10px);
    @include breakpoint($breakpoint-from-tablet) {
      flex: 0 calc(25% - 20px);
    }
    @include breakpoint($breakpoint-from-desktop) {
      flex: 0 calc(20% - 20px);
    }
  }
}

.figure {
  
  &__media {
    
    img {
      display: block;
      width: 100%;
      height: 100%;
      visibility: hidden;
      opacity: 0;
      will-change: opacity;
      transition: opacity .5s; 
      
      &.twic-done {
        visibility: visible;
        opacity: 1;
      }
    }
  }
  
  &__caption {
    
    h3 {
      text-align: center;
      margin-top: .5em;
      font-size: .9em;
    }
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://i.twic.pics/v1/script