CodePen Embed - Component-Level CSS Grid and Responsive Variables by David Luhr

<div class="cards">
  <div class="card">
    <h2 class="card__title">
      Some really important news takes place
    </h2>
    <img class="card__image" src="https://source.unsplash.com/o0kbc907i20/900x600" alt="Government monument building">
    <div class="card__body">
      <div class="card__taxon">
        <svg class="card__clock-icon" width="12" height="12" xmlns="http://www.w3.org/2000/svg"><g transform="translate(1 1)" fill="none" fill-rule="evenodd"><circle cx="5" cy="5" r="5"/><path d="M5 1.667V5M6.667 6.667L5 5" stroke-linecap="round"/></g></svg>
        <p class="card__publish">Posted: Apr. 10, 2018 at 10:38 a.m.</p>
      </div>
      <p class="card__summary">Earlier today, this super important thing happened that is going to change everything. You won&rsquo;t even believe how much this thing will matter forever going forward.</p>
      <a href="#0" class="card__cta">Read more &rarr;</a>
    </div>
  </div>
  <div class="card">
    <h2 class="card__title">
      Other extra special stuff occurs
    </h2>
    <img class="card__image" src="https://source.unsplash.com/45sjAjSjArQ/900x600" alt="Busy stairs in large building">
    <div class="card__body">
      <div class="card__taxon">
        <svg class="card__clock-icon" width="12" height="12" xmlns="http://www.w3.org/2000/svg"><g transform="translate(1 1)" fill="none" fill-rule="evenodd"><circle cx="5" cy="5" r="5"/><path d="M5 1.667V5M6.667 6.667L5 5" stroke-linecap="round"/></g></svg>
        <p class="card__publish">Posted: Apr. 8, 2018 at 5:23 p.m.</p>
      </div>
      <p class="card__summary">In a suprising turn of events, this unexpected event took place and shocked the world.</p>
      <a href="#0" class="card__cta">Read more &rarr;</a>
    </div>
  </div>
  <div class="card">
    <h2 class="card__title">
      Very significant announcement made
    </h2>
    <img class="card__image" src="https://source.unsplash.com/DurC25GdOvk/900x600" alt="Rows of voting seats in political building">
    <div class="card__body">
      <div class="card__taxon">
        <svg class="card__clock-icon" width="12" height="12" xmlns="http://www.w3.org/2000/svg"><g transform="translate(1 1)" fill="none" fill-rule="evenodd"><circle cx="5" cy="5" r="5"/><path d="M5 1.667V5M6.667 6.667L5 5" stroke-linecap="round"/></g></svg>
        <p class="card__publish">Posted: Apr. 7, 2018 at 6:42 a.m.</p>
      </div>
      <p class="card__summary">Jargony jargon was communicated widely to a boring commmitee on Thursday.</p>
      <a href="#0" class="card__cta">Read more &rarr;</a>
    </div>
  </div>
  <div class="card">
    <h2 class="card__title">
      Leader loudly declares decision
    </h2>
    <img class="card__image" src="https://source.unsplash.com/aNSniQXO424/900x600" alt="News photographers documenting event">
    <div class="card__body">
      <div class="card__taxon">
        <svg class="card__clock-icon" width="12" height="12" xmlns="http://www.w3.org/2000/svg"><g transform="translate(1 1)" fill="none" fill-rule="evenodd"><circle cx="5" cy="5" r="5"/><path d="M5 1.667V5M6.667 6.667L5 5" stroke-linecap="round"/></g></svg>
        <p class="card__publish">Posted: Apr. 6, 2018 at 4:54 p.m.</p>
      </div>
      <p class="card__summary">Do people even read beyond the headlines anymore? Hello? Anyone?!?</p>
      <a href="#0" class="card__cta">Read more &rarr;</a>
    </div>
  </div>
</div>

@use postcss-nested;

@import url("https://fonts.googleapis.com/css?family=Poppins:200,300,800");

html {
  font-family: "Poppins";
}

body {
  padding: 20px;
}

.cards {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.card {
  margin-right: var(--card-margin-right);
  margin-left: var(--card-margin-left);
  margin-bottom: 20px;
  padding: var(--card-padding);
  width: var(--card-width);
  display: grid;
  grid-template-areas: var(--card-template-areas);
  grid-template-columns: var(--card-template-columns);
  grid-template-rows: var(--card-template-rows);
  grid-row-gap: 20px;
  grid-column-gap: var(--card-column-gap);
  align-items: var(--card-align-items);
  border: 1px solid #ddd;
  border-radius: 3px;
  overflow: hidden;
  
  @media (max-width: 899px) {
    --card-width: 300px;
    --card-template-areas:
      "card__image card__image card__image"
      ". card__title ."
      ". card__body .";
    --card-template-columns: 20px 1fr 20px;
    --card-template-rows: auto;
  }
  
  @media (min-width: 640px) and (max-width: 899px) {
    --card-margin-right: 10px;
    --card-margin-left: 10px;
  }
  
  @media (min-width: 900px) {
    --card-padding: 20px 20px 0 20px;
    --card-width: 100%;
    --card-template-areas:
      "card__title card__image"
      "card__body  card__image";
    --card-template-columns: 1fr 2fr;
    --card-template-rows: 1fr 3fr;
    --card-column-gap: 20px;
    --card-align-items: start;
  }
}

.card__image {
  max-width: 100%;
  grid-area: card__image;
}

.card__title {
  margin: 0;
  grid-area: card__title;
  font-size: var(--card-title-font-size);
  font-weight: 800;
  line-height: 1.1;
  
  @media (min-width: 900px) {
    --card-title-font-size: 28px;
  }
}

.card__body {
  grid-area: card__body;
}

.card__taxon {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 200;
  color: #888;
}

.card__summary {
  margin: 0 0 20px;
  font-size: 14px;
  font-style: italic;
  font-weight: 300;
  line-height: 1.4;
  color: #333;
}

.card__cta {
  margin-bottom: 20px;
  display: inline-block;
  grid-area: card__cta;
  justify-self: start;
  text-decoration: none;
  border-bottom: 4px solid blue;
  
  &:hover {
    color: #4d4dff;
    border-color: #4d4dff;
  }
}

View Compiled

This Pen is owned by DockYard on CodePen.

See more by @DockYard on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.