<!-- start `headline-grid` component; -->
<section class="headline-grid">
  <h2>Headlines</h2>
  <p>Updated 2:38pm EDT</p>
  <div class="headline-grid__stories">
    <!-- start `card` component; -->
    <article class="card card--overlay"><a href="#">
        <div class="img-cover"><img src="http://via.placeholder.com/240x240" alt="empty placeholder image" /></div>
        <h3>Curabitur in ligula viverra sagittis nunc et</h3>
      </a> </article>
    <!-- end `card` component; -->
    <!-- start `card` component; -->
    <article class="card card--overlay"><a href="#">
        <div class="img-cover"><img src="http://via.placeholder.com/240x240" alt="empty placeholder image" /></div>
        <h3>Ut ut nunc a odio blandit ultrices ac sed purus</h3>
      </a> </article>
    <!-- end `card` component; -->
    <!-- start `card` component; -->
    <article class="card card--overlay"><a href="#">
        <div class="img-cover"><img src="http://via.placeholder.com/240x240" alt="empty placeholder image" /></div>
        <h3>Vestibulum ut lectus sit amet tortor mollis</h3>
      </a> </article>
    <!-- end `card` component; -->
    <!-- start `card` component; -->
    <article class="card card--overlay"><a href="#">
        <div class="img-cover"><img src="http://via.placeholder.com/240x240" alt="empty placeholder image" /></div>
        <h3>Quisque vitae lacus non purus efficitur</h3>
      </a> </article>
    <!-- end `card` component; -->
    <!-- start `card` component; -->
    <article class="card card--overlay"><a href="#">
        <div class="img-cover"><img src="http://via.placeholder.com/240x240" alt="empty placeholder image" /></div>
        <h3>Mauris ut diam eu diam commodo ornare et</h3>
      </a> </article>
    <!-- end `card` component; -->
    <!-- start `card` component; -->
    <article class="card card--overlay"><a href="#">
        <div class="img-cover"><img src="http://via.placeholder.com/240x240" alt="empty placeholder image" /></div>
        <h3>Fusce ac leo eget lorem eleifend fringilla</h3>
      </a> </article>
    <!-- end `card` component; -->
    <!-- start `card` component; -->
    <article class="card card--overlay"><a href="#">
        <div class="img-cover"><img src="http://via.placeholder.com/240x240" alt="empty placeholder image" /></div>
        <h3>Maecenas volutpat augue sed elementum</h3>
      </a> </article>
    <!-- end `card` component; -->
    <!-- start `card` component; -->
    <article class="card card--overlay"><a href="#">
        <div class="img-cover"><img src="http://via.placeholder.com/240x240" alt="empty placeholder image" /></div>
        <h3>Sed quis diam a tortor tempor hendrerit</h3>
      </a> </article>
    <!-- end `card` component; -->
    <!-- start `card` component; -->
    <article class="card card--overlay"><a href="#">
        <div class="img-cover"><img src="http://via.placeholder.com/240x240" alt="empty placeholder image" /></div>
        <h3>Aliquam consectetur ipsum eget turpis</h3>
      </a> </article>
    <!-- end `card` component; -->
    <!-- start `card` component; -->
    <article class="card card--overlay"><a href="#">
        <div class="img-cover"><img src="http://via.placeholder.com/240x240" alt="empty placeholder image" /></div>
        <h3>Volutpat augue sed ele mentum maecenas</h3>
      </a> </article>
    <!-- end `card` component; -->
    <!-- start `card` component; -->
    <article class="card card--overlay d-none d-lg-block"><a href="#">
        <div class="img-cover"><img src="http://via.placeholder.com/240x240" alt="empty placeholder image" /></div>
        <h3>Diam a tortor tempor hend rerit sed quis</h3>
      </a> </article>
    <!-- end `card` component; -->
    <!-- start `card` component; -->
    <article class="card card--overlay d-none d-lg-block"><a href="#">
        <div class="img-cover"><img src="http://via.placeholder.com/240x240" alt="empty placeholder image" /></div>
        <h3>Ipsum eget turpis aliquam conse ctetur</h3>
      </a> </article>
    <!-- end `card` component; -->
    <!-- start `card` component; -->
    <article class="card card--overlay d-none d-lg-block"><a href="#">
        <div class="img-cover"><img src="http://via.placeholder.com/240x240" alt="empty placeholder image" /></div>
        <h3>Cras sollicitudin sapien et odio venenatis</h3>
      </a> </article>
    <!-- end `card` component; -->
    <!-- start `card` component; -->
    <article class="card card--overlay d-none d-lg-block"><a href="#">
        <div class="img-cover"><img src="http://via.placeholder.com/240x240" alt="empty placeholder image" /></div>
        <h3>Nulla interdum turpis sit amet feugiat faucibus</h3>
      </a> </article>
    <!-- end `card` component; -->
    <!-- start `card` component; -->
    <article class="card card--overlay d-none d-lg-block"><a href="#">
        <div class="img-cover"><img src="http://via.placeholder.com/240x240" alt="empty placeholder image" /></div>
        <h3>Pellentesque laoreet urna non interdum egestas</h3>
      </a> </article>
    <!-- end `card` component; -->
    <!-- start `card` component; -->
    <article class="card card--overlay d-none d-lg-block"><a href="#">
        <div class="img-cover"><img src="http://via.placeholder.com/240x240" alt="empty placeholder image" /></div>
        <h3>Nam dignissim tortor at dui pulvinar quis viverra</h3>
      </a> </article>
    <!-- end `card` component; -->
  </div>
</section>
<!-- end `headline-grid` component; -->

{
  "title": "Headlines",
  "updated": "Updated 2:38pm EDT",
  "stories": [
    {
      "img": "http://via.placeholder.com/240x240",
      "alt": "empty placeholder image",
      "title": "Curabitur in ligula viverra sagittis nunc et",
      "url": "#"
    },
    {
      "img": "http://via.placeholder.com/240x240",
      "alt": "empty placeholder image",
      "title": "Ut ut nunc a odio blandit ultrices ac sed purus",
      "url": "#"
    },
    {
      "img": "http://via.placeholder.com/240x240",
      "alt": "empty placeholder image",
      "title": "Vestibulum ut lectus sit amet tortor mollis",
      "url": "#"
    },
    {
      "img": "http://via.placeholder.com/240x240",
      "alt": "empty placeholder image",
      "title": "Quisque vitae lacus non purus efficitur",
      "url": "#"
    },
    {
      "img": "http://via.placeholder.com/240x240",
      "alt": "empty placeholder image",
      "title": "Mauris ut diam eu diam commodo ornare et",
      "url": "#"
    },
    {
      "img": "http://via.placeholder.com/240x240",
      "alt": "empty placeholder image",
      "title": "Fusce ac leo eget lorem eleifend fringilla",
      "url": "#"
    },
    {
      "img": "http://via.placeholder.com/240x240",
      "alt": "empty placeholder image",
      "title": "Maecenas volutpat augue sed elementum",
      "url": "#"
    },
    {
      "img": "http://via.placeholder.com/240x240",
      "alt": "empty placeholder image",
      "title": "Sed quis diam a tortor tempor hendrerit",
      "url": "#"
    },
    {
      "img": "http://via.placeholder.com/240x240",
      "alt": "empty placeholder image",
      "title": "Aliquam consectetur ipsum eget turpis",
      "url": "#"
    },
    {
      "img": "http://via.placeholder.com/240x240",
      "alt": "empty placeholder image",
      "title": "Volutpat augue sed ele mentum maecenas",
      "url": "#"
    },
    {
      "img": "http://via.placeholder.com/240x240",
      "alt": "empty placeholder image",
      "title": "Diam a tortor tempor hend rerit sed quis",
      "url": "#"
    },
    {
      "img": "http://via.placeholder.com/240x240",
      "alt": "empty placeholder image",
      "title": "Ipsum eget turpis aliquam conse ctetur",
      "url": "#"
    },
    {
      "img": "http://via.placeholder.com/240x240",
      "alt": "empty placeholder image",
      "title": "Cras sollicitudin sapien et odio venenatis",
      "url": "#"
    },
    {
      "img": "http://via.placeholder.com/240x240",
      "alt": "empty placeholder image",
      "title": "Nulla interdum turpis sit amet feugiat faucibus",
      "url": "#"
    },
    {
      "img": "http://via.placeholder.com/240x240",
      "alt": "empty placeholder image",
      "title": "Pellentesque laoreet urna non interdum egestas",
      "url": "#"
    },
    {
      "img": "http://via.placeholder.com/240x240",
      "alt": "empty placeholder image",
      "title": "Nam dignissim tortor at dui pulvinar quis viverra",
      "url": "#"
    }
  ]
}

.headline-grid {
  background: $color__backgroundDarkShade;
  padding: size(1) size(1) size(0.5);
  margin-top: size(1);

  h2 {
    display: inline-block;
    font-size: $font-size__large;
    vertical-align: bottom;
  }

  p {
    display: inline-block;
    font-size: $font-size__small;
    margin: 0 0 0 size(0.5);
  }

  // container for all card components;
  &__stories {
    display: flex;
    flex-wrap: wrap;
    padding-top: size(0.5);
    margin: 0 size(0.5) * -1;
  }

  // rows of two (2) at smaller breakpoints;
  .card {
    width: calc(50% - #{size(1)});
    margin: size(0.5);

    // rows of four (4) at larger breakpoints;
    @include breakpoint($breakpoint--lg) {
      width: calc(25% - #{size(1)});
    }
  }
}