<link href="https://fonts.googleapis.com/css?family=Lato:300,400,900|Playfair+Display:400,700,900" rel="stylesheet">

<div class="cover">
  <div class="cover__content">
    <div class="top-section">
      <div class="title">
        <h1 class="title__text">Geupap.</h1>
        <div class="title__details">
          <p><a href="https://www.behance.net/gallery/48387413/Magazine-Layout">Inspiration</a></p>
          <p>April 2018</p>      
        </div>
      </div>
      <div class="top-section__content">

        <div class="content-preview">
          <div class="content-preview__cat">The Ultimate</div>
          <h3 class="content-preview__title">Journal</h3>
          <p class="content-preview__excerpt">autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat ulla facilsilis at vero eros et accumsan et iusto.</p>
        </div>

        <div class="content-preview">
          <div class="content-preview__cat">Street top pick</div>
          <h3 class="content-preview__title">Fashion Model</h3>
          <p class="content-preview__excerpt">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio fugiat consequatur consectetur at, deleniti explicabo reprehenderit.</p>
        </div>  
      </div>
    </div>
    
    <!-- TODO  -->
    <div class="logo">
      <div class="logo__circle">
        CP
      </div>
      <h2 class="logo__text">New session Buy</h2>
    </div>

    <div class="lower-section">
      
      <div class="headline">
        <div class="line line--horizontal line--left"></div>
        <h2 class="boxed-headline">
          Special Fashion Week
        </h2>
        <div class="line line--horizontal line--right"></div>
      </div>

      <div class="line line--vertical line--top"></div>
      <div class="line line--vertical line--bottom"></div>

      <div class="spacer"></div>
      <div class="content-preview content-preview--left content-preview--top">
        <div class="content-preview__cat">Modern Dressing</div>
        <h3 class="content-preview__title">Special Summering</h3>
        <p class="content-preview__excerpt">Adipisicing elit. Ipsam dicta, quia similique nulla eum voluptatibus quae laborum, consectetur sunt necessitatibus corrupti quaerat.</p>
      </div>

      <div class="content-preview  content-preview--right content-preview--top">
        <div class="content-preview__cat">Style Random</div>
        <h3 class="content-preview__title">Inside Fashion Pack</h3>
        <p class="content-preview__excerpt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi provident vel, architecto numquam nemo repellat.</p>
      </div>
      <div class="spacer"></div>
      <div class="spacer"></div>

      <div class="content-preview content-preview--left content-preview--bottom">
        <div class="content-preview__cat">Group Jenita</div>
        <h3 class="content-preview__title">Sensual Woman Girl</h3>
        <p class="content-preview__excerpt">Doloremque, totam blanditiis itaque ipsam commodi atque, vero, laborum eos quaerat nostrum deleniti laboriosam debitis.</p>
      </div>

      <div class="content-preview content-preview--right content-preview--bottom">
        <div class="content-preview__cat">Power of Beauty</div>
        <h3 class="content-preview__title">Glamour Fashion Week</h3>
        <p class="content-preview__excerpt">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab pariatur eaque nihil tempora facere dicta mollitia impedit, nisi eius.</p>
      </div>
    </div>  

  </div>

</div>

$playfair: 'Playfair Display', serif;
$lato: 'Lato', sans-serif;

$accent-color: #FBD5B0;

$grid-breakpoint: 700px;
$smallest-breakpoint: 520px;


* { 
  box-sizing: border-box;
}

.cover {
  background-image: url('https://images.unsplash.com/photo-1445052520430-32c8ebc92fe3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ef2a28d65008720054e155d5ba3f29a6&auto=format&fit=crop&w=1650&q=80');
  background-size: cover;
  background-position: center;
  color: #ffffff;
  font-family: $lato;
  padding: 2em;
}
.cover__content {
  max-width: 1000px;
  margin: 0 auto;
}

.top-section {
  background-color: #ffffff;
  color: #555C62;
  padding: 3em; 
  margin-bottom: 4em;
  
  &__content {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .content-preview {
    flex: 0 1 230px;
    @media screen and (max-width: $smallest-breakpoint) {
      flex-grow: 1;
    }
  }
}

.logo {
  display: none;
}



.title {
  display: flex;
  align-items: last baseline;
  margin-bottom: 2em;
  flex-wrap: wrap;
  

  &__text {
    font-family: $playfair;
    font-weight: 900;
    font-size: 3em;

    @media screen and (min-width: $smallest-breakpoint) {
      font-size: 4em;
    }

    @media screen and (min-width: $grid-breakpoint) {
      font-size: 6em;
    }
    
    flex-grow: 1;
    letter-spacing: 0.025em;
    margin-bottom: 0.33em;
  }
  &__details {
    font-weight: 400;
  }
  a {
    color: inherit;
    text-decoration: inherit;
    &:hover {
      color: $accent-color;
    }
  }
}

.content-preview {
  padding: 0.5em;
  justify-self: start;
  
  @media screen and (min-width: $grid-breakpoint) {
    &--left {
      text-align: right;
      justify-self: end;
    }    
  }

  &__cat, &__title {
    font-family: $playfair;
    font-size: 1.2em;
  }
  &__cat {
    text-decoration: underline;
    margin-bottom: 0.25em;
  }
  &__title {
    font-weight: 700;
    margin-bottom: 0.5em;
  }
  &__excerpt {
    text-transform: lowercase;
    font-weight: 300;
  }
}

.lower-section {
  margin: 0 1em;

  @media screen and (min-width: $grid-breakpoint) {
    display: grid;
    margin-top: 8em;
  }

  grid-template-columns: 10% 2fr 10px 2fr 10%;
  grid-auto-flow: row dense;
  .content-preview {
    max-width: 240px;
    padding: 1em;
    margin-top: 1em;
    margin-bottom: 1em;
    &--top {
      margin-top: 2em;
    }
    &--bottom {
      margin-bottom: 2.5em;
    }
  }
}

.headline {
  grid-row: 2;
  grid-column: 1 / -1;
  display: flex;
}
$headline-border-offset: 0.5em;
.boxed-headline {  
  text-align: center;
  padding: 1em;
  border: 1px solid #ffffff;
  position: relative;
  flex: 1 0 auto;
  
  text-transform: uppercase;
  letter-spacing: 0.4em;
  line-height: 1.3;
  
  font-size: 1.2em;
  font-weight: 900;
  max-width: 100%;

  &:before {
    content: "";
    position: absolute;
    border: inherit;
    left: $headline-border-offset;
    right: $headline-border-offset;
    top: -$headline-border-offset;
    bottom: -$headline-border-offset;
  }
}
.line {  
  position: relative;    
  @media screen and (max-width: $smallest-breakpoint) {
    display: none;
  }
  // Little square  
  &:before {
    content: '';
    height: 0.8em;
    width: 0.8em;
    background: #ffffff;
    display: block;
    position: absolute;
  }
  // Line
  &:after {
    content: '';
    border-color: #ffffff;
    position: absolute;
    display: block;
  }
  
  &--vertical {
    grid-column: 3;
    display: none;
    @media screen and (min-width: $grid-breakpoint) {
      display: block;
    }
    &:after {
      left: 50%;
      top: 0;
      bottom: 0;
      border-left: 1px solid;
    }
    &:before {
      left: 50%;
      transform: translateX(-50%);
    }    
  }
  &--bottom {
    &:before {
      bottom: 0;
    }
  }
  &--horizontal {
    flex: 1 0 30px;
    &:after {
      left: 0;
      right: 0;
      top: 50%;
      border-top: 1px solid;
    }
    &:before {
      top: 50%;
      transform: translateY(-50%);
    }
  }
  &--right {
    &:before {
      right: 0;
    }
  }
}