<article class="pt-moderncard">
  <section class="pt-moderncard__meta">
     <img class="pt-moderncard__image" src="https://images.unsplash.com/photo-1507878866276-a947ef722fee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=30" alt="Image">
  </section>

  <section class="pt-moderncard__main">
    <div class="pt-moderncard__body">
      <header class="pt-moderncard__head">
        <h1 class="pt-moderncard__headline">
          Headline
        </h1>
        <p class="pt-moderncard__subhead">
          Subline
        </p>
      </header>

      <p class="pt-moderncard__excerpt">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum possimus quae accusantium velit? Facilis, exercitationem nemo accusantium illum sed nisi eaque repudiandae quam autem, ullam cumque perspiciatis illo maxime quasi.
      </p>
    </div>

    <footer class="pt-moderncard__footer">
      <ul class="pt-moderncard__list">
        <li class="pt-moderncard__listitem">
          <svg class="pt-moderncard__icon" viewBox="0 0 384 512" id="map-marker" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M192 0C85.903 0 0 86.014 0 192c0 71.117 23.991 93.341 151.271 297.424 18.785 30.119 62.694 30.083 81.457 0C360.075 285.234 384 263.103 384 192 384 85.903 297.986 0 192 0zm0 464C64.576 259.686 48 246.788 48 192c0-79.529 64.471-144 144-144s144 64.471 144 144c0 54.553-15.166 65.425-144 272zm-80-272c0-44.183 35.817-80 80-80s80 35.817 80 80-35.817 80-80 80-80-35.817-80-80z"></path></svg>          Location
        </li>

        <li class="pt-moderncard__listitem">
          <svg class="pt-moderncard__icon" viewBox="0 0 448 512" id="map-marker" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"></path></svg>          Date
        </li>

        <li class="pt-moderncard__listitem">
          <svg class="pt-moderncard__icon" viewBox="0 0 512 512" id="map-marker" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z"></path></svg>          Time
        </li>

        <li class="pt-moderncard__listitem">
          <svg class="pt-moderncard__icon" viewBox="0 0 384 512" id="map-marker" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z"></path></svg>          Category
        </li>
      </ul>
    </footer>
  </section>
</article>

.pt-moderncard {
  display: flex;
  height: 335px;

  background: white;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  border-radius: 4px;
  
  font-family: "proxima-soft",sans-serif;
}

.pt-moderncard__main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-basis: 50%;
  padding: 1em;
  
  transition: all 0.1s linear 0.1s;
  
  .pt-moderncard:hover & {
    flex-basis: 70%;
  }
  
  @media screen and (prefers-reduced-motion: reduce) {
    .pt-moderncard:hover & {
      flex-basis: 50%;
    }
  }
}

.pt-moderncard__meta {
  flex-basis: 50%;
  position: relative;
  transition: all 0.1s linear 0.1s;
  
  .pt-moderncard:hover & {
    flex-basis: 30%
  }
  
  @media screen and (prefers-reduced-motion: reduce) {
    .pt-moderncard:hover & {
      flex-basis: 50%;
    }
  }
}

.pt-moderncard__headline {
  margin: 0 0 5px 0;
  font-size: 16px;
  line-height: 1.25;
}

.pt-moderncard__subhead {
  margin: 0 0 5px 0;

  color: #1f99d6;
  font-size: 12px;
  line-height: 1.4;
}

.pt-moderncard__excerpt {         
  $paragraph-font-size: 14px;
  $paragraph-line-height: 1.22;
  $paragraph-lines: 5;
  $paragraph-height: $paragraph-font-size * $paragraph-line-height * $paragraph-lines;
    
  $paragraph-lines-hover: 7;
  $paragraph-height-hover: $paragraph-font-size * $paragraph-line-height * $paragraph-lines-hover;
  
  
  margin: 0 0 10px;
  overflow: hidden;
  font-size: $paragraph-font-size;
  line-height: $paragraph-line-height;
  max-height: $paragraph-height;
transition: all 0.1s linear 0.1s;
  
  .pt-moderncard:hover & {
    max-height: $paragraph-height-hover;
  }
  
  @media screen and (prefers-reduced-motion: reduce) {
    .pt-moderncard:hover & {
      max-height: $paragraph-height;
    }
  }
}

.pt-moderncard__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left;
  border-radius: 4px 0 0 4px;
}

.pt-moderncard__list {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.pt-moderncard__listitem {
  display: flex;
  margin: 0 0 5px 0;
  
  font-size: 12px;
  line-height: 1.3;
}

.pt-moderncard__icon {
  width: 20px;
  height: 13px;
}


/* general page setup */
* {
  box-sizing: border-box;
}

body {
  background: #eee;
  display: grid;
  grid-template-columns: 400px 400px;
  padding: 1em;
}

try {
  Typekit.load({ async: true });
} catch (e) {}