<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">
          <img data-twic-src="placeholder:hot-pink">
        </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" data-twic-background="url(placeholder:light-blue)"></div>
        </div>
      </div>
      <div class="thumbs__item">
        <div class="box box--16-9">
          <div class="box__inner" data-twic-background="url(placeholder:light-blue)"></div>
        </div>
      </div>
      <div class="thumbs__item">
        <div class="box box--16-9">
          <div class="box__inner" data-twic-background="url(placeholder:light-blue)"></div>
        </div>
      </div>
      <div class="thumbs__item">
        <div class="box box--16-9">
          <div class="box__inner" data-twic-background="url(placeholder:light-blue)"></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" data-twic-background="url(placeholder:auto)"></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" data-twic-background="url(placeholder:auto)"></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 data-twic-src="placeholder:auto">
                </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 data-twic-src="placeholder:auto">
                </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 data-twic-src="placeholder:auto">
                </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 data-twic-src="placeholder:auto">
                </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 data-twic-src="placeholder:auto">
                </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 data-twic-src="placeholder:auto">
                </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 data-twic-src="placeholder:auto">
                </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 data-twic-src="placeholder:auto">
                </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 data-twic-src="placeholder:auto">
                </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 data-twic-src="placeholder:auto">
                </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');

// breakpoints
$breakpoint-from-tablet: "only screen and (min-width: 768px)";
$breakpoint-from-desktop:  "only screen and (min-width: 992px)";
$breakpoint-from-desktop-lrg: "only screen and (min-width: 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;
    
  @media #{ $breakpoint-from-desktop } {
    font-size: 18px;
  }
    
  @media #{ $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;
}

.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;
    
    @media #{ $breakpoint-from-tablet } {
      margin: 0;
    }
  }
  
  &__menu {
    display: none;
    @media #{ $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;
      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 {
}

.section--thumbnails {
  display: none;
  @media #{ $breakpoint-from-tablet } {
    display: block;
  }
}

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

    .box__inner {
      
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      
      &:after {
        @media #{ $breakpoint-from-tablet } {
          content: "aspect ratio: 16:9";
        }
        @media #{ $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%;
    @media #{ $breakpoint-from-desktop } {
      flex: 1 0;
    }
    
    .box, .box__inner {
      border-radius: 0;
    }
  }
  
  &__text {
    flex: 1 100%;
    text-align: justify;
    margin-top: 20px;
    @media #{ $breakpoint-from-desktop } {
      flex: 2 0;
      margin-top: 0;
    }
    
    &--left {
      @media #{ $breakpoint-from-desktop } {
        order: -1;
        padding-right: 40px;
      }
    }
    
    &--right {
      @media #{ $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);
    @media #{ $breakpoint-from-tablet } {
      flex: 0 calc(25% - 20px);
    }
    @media #{ $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;
      object-fit: cover;
      
      &.twic-done {
        visibility: visible;
        opacity: 1;
      }
    }
  }
  
  &__caption {
    
    h3 {
      text-align: center;
      margin-top: .5em;
      font-size: .9em;
    }
  }
}