<header>
  <h1>This Demo uses <a href="http://gridbyexample.com/">CSS Grid</a>, <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">Flexbox</a>, & <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@supports">@supports</a></h1>
</header>

<section class="top-left"></section>
<section class="top-right"></section>
<section class="bottom-left"></section>
<section class="bottom-right"></section>

<footer>
  <p>Make sure you are on Chrome 57+ or Firefox 52+</p>
</footer>

// Shared Things

@import url('https://fonts.googleapis.com/css?family=Space+Mono');
$tri-color: yellow;
$img-sec-h: 45vh;
$gutter: 8px;

body {
  font-family: 'Space Mono';
  text-align: center;
  padding: 0;
  margin: 0;
}

// Flexbox within the grid
header, footer, section {
  display: flex;
  align-items: center;
  justify-content: center;
}

h1 {
  font-size: 1.4rem;
  line-height: 1.2;
}

a {
  color: #a60;
}

footer p {
 padding: 2em 0;
}

.top-left {
  background-image: url('https://source.unsplash.com/random');
}

.top-right {
  background-image: url('https://source.unsplash.com/category/buildings');
}

.bottom-left {
  background-image: url('https://source.unsplash.com/category/nature');
}

.bottom-right {
  background-image: url('https://source.unsplash.com/category/technology');
}

// This is just fun with blend modes because why not?
section {
  background-position: 50%;
  background-size: cover;
  position: relative;
  
  &:after {
    content: '';
    transition-duration: .5s;
    transform-origin: 50%;
    position: absolute;
    left: 0;
    width: 0; 
    height: 0;
    border-left: 0 solid transparent;
    border-right: 40vw solid transparent;
    border-top: $img-sec-h solid $tri-color;
    mix-blend-mode: soft-light;
  }
  
  &:hover:after {
    transform: rotateX(180deg);
  }
  
  &:before {
    content: '';
    background-color: red;
    mix-blend-mode: difference;
    width: $img-sec-h / 2;
    height: $img-sec-h / 2;
    border-radius: 50%;
  }
}

// Grid Things for super modern browsers!

@supports (display: grid) {
  body {
    // Grid!
    display: grid;

    // Gutter
    grid-gap: $gutter;

    // Setting columns for template below
    grid-template-columns: 50vw;

    // Grid template based on 50vh columns
    grid-template-areas:
      "header       header"
      "top-left     top-right"
      "bottom-left  bottom-right"
      "footer       footer";

    // header height set at 10vh
    // sections are 45vh to fit on same view
    // footer is auto height based on content
    grid-template-rows: 10vh $img-sec-h $img-sec-h auto;
  }

  header {
     grid-area: header;
  }

  footer {
    grid-area: footer;
  }

  .top-left {
    grid-area: top-left;
  }

  .top-right {
    grid-area: top-right;
  }

  .bottom-left {
    grid-area: bottom-left;
  }

  .bottom-right {
    grid-area: bottom-right;
  }
}

@supports not (display: grid) {
  body {
    display: flex;
    flex-flow: row wrap;
  }
  
  // set height on header
  header {
    height: 10vh;
  }
  
  header, footer {
    width: 100%;
  }
  
  // setting height and flex positions on image elements
  .top-left,
  .top-right,
  .bottom-left,
  .bottom-right {
    height: $img-sec-h;
    flex: 0 1 calc(50% - #{$gutter/2});
  }
  
  // gutter to match grid
  .top-left,
  .bottom-left {
    margin-right: $gutter;
  }
  
  .top-left,
  .top-right {
    margin-bottom: $gutter;
  }
}

// This Demo requires CSS grid browser support
// Demo with Flexbox fallback is here:
// https://codepen.io/una/pen/BWPbzV