$prim: #212121;
$sec: #eb1734;
$ter: #f6f6f6;
$qua: #ffffff;

$bp1: 600px;
$bp2: 900px;
$bp3: 1200px;
$bp4: 1400px;
$bp5: 1600px;

@mixin feature($feature) {
  .#{$feature} & {
    @content;
  }
}

* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  border: 0;
}

a:link, a:visited {
  color: $sec;
}


.site {
  font-size: 62.5%;

  // Header
  &__header {
    align-items: flex-end;
    justify-content: space-between;
    
    grid-column: 2 / -2;
    
    
    @media (min-width: $bp1) {
      overflow: hidden;
    }
    
    @media (min-width: $bp2) {
      @include feature('float') {
        padding: 1em;
      }
    }

    @media (min-width: $bp3) {
      margin-bottom: 2em;
     
      @include feature('flex') {
        display: flex;
      }
    }
  }

  // Content
  &__content {
    justify-content: space-between;
    flex-wrap: wrap;
    
    @media (min-width: $bp2) {
      grid-column: 1 / -1;
    }

    @include feature('flex') {
      display: flex;
    }

    @include feature('grid') {
      @media (min-width: $bp3) {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "teaser"
                             "featured"
                             "text"
                             "news";
      }      
      
      @media (min-width: $bp5) {
        grid-template-columns: 10em minmax(auto, 60em) 10em;
        grid-template-areas: "teaser teaser teaser"
                             ". featured ."
                             "text text text"
                             ". news .";
      }
    }
  }

  &__title {
    border-bottom: 4px solid $sec;
    padding-bottom: 0.25em;
    margin: 0;
    
    @media (min-width: $bp2) {
      display: inline-block;
    }
  }
  
  &__footer {
    background-color: $ter;
    padding: 1em;
    grid-column: 1 / -1;
    
    &__items {
      margin: 0 0 1em;
      padding: 0;
      list-style: none;
    }
    
    &__wrap {
      max-width: 54em;
      margin: 0 auto;
    }
  }
}
  
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 2em;
  line-height: 1.5;
  max-width: $bp1;
  margin: 0 auto;
  padding: 0.625em;
  
  grid-template-columns: 1fr minmax(auto, 80em) 1fr;
  
  @media (min-width: $bp1) {
    max-width: 70em;
  }
  
  @media (min-width: $bp2) {
    @include feature('grid') {
      display: grid;
      
      @supports(display: grid) {
        max-width: 100%;
      }
    }
  }
}


// Nav
.nav {
  @include feature('grid') {
    @supports(display: grid) {
      margin-bottom: 0;
    }
  }
 
  &__items {
    margin: 0;
    padding: 1.5em 0 1em;
    list-style: none;
    
    justify-content: right;
    
    @include feature('float') {
      overflow: hidden;
  
      @media (min-width: $bp1) {
        float: right;
      }
    }
    
    @media (min-width: $bp2) {
      @include feature('flex') {
        display: flex;
      }
    }
  }

  &__item {
    font-weight: bold;
    margin: 0 0.5em 0.5em 0;
    
    @include feature('float') {
      float: left;
      margin: 0 0.5em 0 0;
      
      @media (min-width: $bp2) {
        margin: 0 0 0 1em;
      }    
    }    
  }
  
  &__link {
    color: $prim;
    display: block;
    text-decoration: none;
    
    &:link, &:visited {
      color: $prim;
    }
    
    &--active:link,
    &--active:visited,
    &:focus,
    &:hover {
      color: $sec;
      text-decoration: underline;
      outline: none;
    }
  }
}


// Teaser
.teaser {
  background-color: $sec;
  color: $ter;
  font-size: 1.5em;
  padding: 0.5em 0.75em 0.75em;
  margin: 0 auto 2em;
  clear: both;
  width: 100%;
  text-align: center;
  
  justify-content: center;
  align-items: center;
  
  grid-area: teaser;
  
  @include feature('flex') {
    display: flex;
  }
  
  @media (min-width: $bp2) {
    font-size: 2em;
    margin-bottom: 1.5em;
    
    @include feature('float') {
      height: 10em;
      display: table;
    }
  }
  
  a:link, a:visited {
    color: $prim;
  }
  
  a:hover {
    text-decoration: none;
  }
  
  &__content {
    @media (min-width: $bp1) {
      @include feature('float') {
        display: table-cell;
        vertical-align: middle;
      }
    }
    
    &__heading {
      line-height: 1.3;
      margin: 0 0 0.4em;
    }

    &__sub {
      font-size: 0.75em;
      margin: 0;
    }
  }
}

.heading {
  font-size: 2em;
  color: $sec;
  line-height: 1.2;
  margin: 0 0 0.5em;
}

// Featured
.featured {
  margin: 0 0 3em;
  
  flex-wrap: wrap;
  justify-content: space-between;
  
  grid-area: featured;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: minmax(5em, 1fr) 1fr 1fr;
  align-items: start;
  grid-gap: 1em;
  
  @include feature('flex') {
    @media (min-width: $bp1) {
      display: flex;
    }  
  }  

  @include feature('grid') {
    @media (min-width: $bp1) {
      display: grid;
    }
  }

  @media (min-width: $bp2) {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: none;
  }    

  @media (min-width: $bp3) {
    grid-template-columns: repeat(4, 1fr);
  }

  &__heading {
    flex: 0 0 100%;
    
    grid-row: 1;
    grid-column: 2;

    @media (min-width: $bp2) and (max-width: $bp3) {
      grid-column: 3;
    }
  }
  
  &__post {
    $post: &;
    
    flex-direction: column;
    
    &:not(:last-child) {
      margin-bottom: 1em;
    }
    
    @media (min-width: $bp1) and (max-width: $bp2) {
      width: 49.5%;
      grid-row: span 2;

      &:nth-child(even) {
        margin: 0 1% 0 0;
      }
    }      

    @media (min-width: $bp2) {
      width: 24.25%;
      
      grid-row: auto;

      &:not(:last-child) {
        margin: 0 1% 0 0;
      }
    }
    
    @media (min-width: $bp3) {
      grid-row: span 2;

      &:nth-of-type(2) {
        grid-column: 2;
        grid-row: 2 / span 2;  
      }    
    }   

    &__heading {
      margin: 0;
      order: 1;
    }
    
    @include feature('float') {
      float: left;
    }
    
    @include feature('flex') {
      display: flex;
    }
    
    @include feature('grid') {
      @supports(display: grid) {
        width: auto;

        &:nth-of-type(3) {
          @media (min-width: $bp3) {
            margin-top: 2em;
          }
        }    
      }    
    }
    
    &__link {
      &:focus,
      &:hover {
        #{$post}__img {
          outline: 4px solid $sec;
          filter: saturate(2);
        }
      }
    }
    
    &__img {
      vertical-align: middle;
      width: 100%;
    }
  }
}

// Text
.text {
  background: $ter;
  margin: 0 0 3em;
  padding: 1em 0.75em 0.5em;
  width: 100%;
  
  grid-area: text;
  
  @media (min-width: $bp3) {
    grid-area: text;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
    
            
    @include feature('grid') {
      @supports(display: grid) {
        padding-left: 0;
        padding-right: 0;
      } 
    } 
  } 
  
  @include feature('grid') {
    @media (min-width: $bp3) {
      display: grid;
    }
  }
  
  &__subheading {
    margin: 0;
  }
  
  &__heading {
    @media (min-width: $bp3) {
      margin: 0.5em 0;
      grid-column-start: 2;
    }
  }

  &__content {
    @media (min-width: $bp2) and (max-width: $bp3) {
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 1em;

      @include feature('flex') {
        display: flex;
      }
      
      @include feature('grid') {
        display: grid;
      }
      
      &__section {
        flex: 1 0 0;
        padding-right: 2rem;
        
        @include feature('grid') {
          @supports(display: grid) {
            padding-right: 0;
          }
        }
      }
    }
    
    @media (min-width: $bp3) {
      max-width: 20em;
      grid-column-start: 2;
    }
  }
}


.news {
  margin-bottom: 3em;
  width: 100%;
  
   @media (min-width: $bp1) {
    flex-wrap: wrap;
    justify-content: space-between;

    grid-area: news;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1em;
    justify-self: center;
     
    &__heading {
      flex-basis: 33.333%;
      max-width: 33.333%;
      
      grid-column: 1;
      
      @include feature('grid') {
        @supports(display: grid) {
          max-width: 100%;
        }
      }
    }
  }
  
  @media (min-width: $bp2) {
    grid-template-columns: repeat(3, 1fr);
  }
  
  @include feature('flex') {
    @media (min-width: $bp1) {
      display: flex;
    }
  }
  
  @include feature('grid') {
    @media (min-width: $bp1) {
      display: grid;
      
      @supports(display: grid) {
        max-width: 54em;
      }
    }
  }
}



// Articles
.article {
  background-color: $prim;
  color: $qua;
  padding: 1em;
  margin-bottom: 0.5em;
  
  grid-template-columns: 1fr;
  
  &:first-child {
    grid-row: span 2;
  }  
  
  @media (min-width: $bp2) {
    &:nth-child(2),
    &:nth-child(3) {
      grid-template-columns: 16em 1fr;
      grid-template-rows: minmax(10em, 1fr);
      grid-column: 2 / -1;
      grid-gap: 1em;
    }
  }
  
  &--flat {
    align-self: start;
    grid-template-rows: none;
  }
  
  &__heading {
    margin: 0;
    padding: 0.5rem 1rem;
    font-size: 1.4em;

    grid-row: 1;
    grid-column: 1;
    z-index: 1;
    align-self: start;
    justify-self: end;
    
    @include feature('grid') {
      @supports(display: grid) {
        background-color: $sec;
        color: $ter;
      }
    }
  }  
  
  &__link {
    grid-row: 1;
    grid-column: 1;
    display: block;

    &:focus,
    &:hover {
      outline: 4px solid $sec;
    }
  }

  &__image {
    object-fit: cover;
    width: 100%;
    display: block;
    max-width: 30em;
    height: 100%;
  }
 
  @include feature('float') {
    @media (min-width: $bp1) {
      width: 50%;
      float: left;
      border: 5px solid #ffffff;
    }   
    
    @media (min-width: $bp1) and (max-width: $bp2) {
      &:nth-of-type(odd) {
        clear: left;
      }
    }
    
    @media (min-width: $bp2) {
      width: 33.3%;
      
      &:nth-of-type(4n) {
        clear: left;
      }
    }
  }    
  
  @media (min-width: $bp2) {
    @include feature('flex') {
      flex-basis: 33.333%;
      max-width: 33.333%;
    }  
    
    @include feature('grid') {
      @supports(display: grid) {
        max-width: 100%;
      }
    }
  }  
  
  @include feature('grid') {
    display: grid;
    
    @supports(display: grid) {
      max-width: 100%;
      width: 100%;
      border: none;
    
      @media (min-width: $bp1) {
        margin-bottom: 0;
      }
    
      &__content {
        padding: 0.5em 0;
        
        p {
          margin: 0;
        }

        &--flexible {
          //padding: 0 0.5em;
        }
      }
    }
  }
}



// Controls
.controls {
  background-color: $qua; 
  left: 1em;
  padding: 1em 1.5em;
  top: 1em;
  z-index: 5000;
  width: 225px;
  
  &__heading {
    color: $sec;
    margin: 0 0 0.75em;
    cursor: move;
  }
  
  &__slider {
    width: 100%;
  }
  
  &__status {
    font-style: italic;
    margin-top: 0.5em;
  }
  
  @media (min-width: $bp1) {
    border-radius: 5px;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
    position: fixed;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

// IE8
main, nav, aside, header, footer, section, article {
  display: block;
}