<div class="page-center">
  
<!-- Featured Blog Listing at the top -->
<ul class="custom-featured-blog-listing">

  <li class="custom-blog-listing-item">
    <div class="custom-blog-featured-listing-content">
      <img class="custom-blog-post-image" alt="Description of image" src="https://images.pexels.com/photos/1095901/pexels-photo-1095901.png?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
      />
      <div class="custom-blog-post-text">
        <!--post summary-->
        <div class="custom-blog-post-header">
          <h2><a href="#">Headline of the article</a></h2>
        </div>
        <i>Published on <span class="custom-blog-post-date"> Jun 21, 2018</span></i>
        <p>Here are a few lines of text that summarize the post content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a pretium ligula, vel suscipit lacus. Morbi imperdiet lorem eu ipsum...</p>
        <a class="custom-blog-post-more-link" href="#">Read More</a>
      </div>
      <!-- end featured-post-text -->
    </div>
  </li>
</ul>

<!-- Remaining blog posts -->
<ul class="custom-blog-listing">

  <li class="custom-blog-listing-item">
    <div class="custom-blog-listing-content">
      <img class="custom-blog-post-image" alt="Description of image" src="https://images.pexels.com/photos/374684/pexels-photo-374684.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
      />
      <div class="custom-blog-post-text">
        <!--post summary-->
        <div class="custom-blog-post-header">
          <h2><a href="#">Headline of the article</a></h2>
        </div>
        <i>Published on <span class="custom-blog-post-date"> Jun 21, 2018</span></i>
        <p>Here are a few lines of text that summarize the post content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a pretium ligula, vel suscipit lacus. Morbi imperdiet lorem eu ipsum...</p>
        <a class="custom-blog-post-more-link" href="#">Read More</a>
      </div>
      <!-- end featured-post-text -->
    </div>
  </li>
  
  <li class="custom-blog-listing-item">
    <div class="custom-blog-listing-content">
      <img class="custom-blog-post-image" alt="Description of image" src="https://images.pexels.com/photos/374870/pexels-photo-374870.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
      />
      <div class="custom-blog-post-text">
        <!--post summary-->
        <div class="custom-blog-post-header">
          <h2><a href="#">Headline of the article</a></h2>
        </div>
        <i>Published on <span class="custom-blog-post-date"> Jun 21, 2018</span></i>
        <p>Here are a few lines of text that summarize the post content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a pretium ligula, vel suscipit lacus. Morbi imperdiet lorem eu ipsum...</p>
        <a class="custom-blog-post-more-link" href="#">Read More</a>
      </div>
      <!-- end featured-post-text -->
    </div>
  </li>

  <li class="custom-blog-listing-item">
    <div class="custom-blog-listing-content">
      <!--<img class="custom-blog-post-image" alt="Description of image" src="https://images.pexels.com/photos/374870/pexels-photo-374870.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />--->
      <div class="custom-blog-post-text">
        <!--post summary-->
        <div class="custom-blog-post-header">
          <h2><a href="#">Headline of the article - This has no image</a></h2>
        </div>
        <i>Published on <span class="custom-blog-post-date"> Jun 21, 2018</span></i>
        <p>Here are a few lines of text that summarize the post content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a pretium ligula, vel suscipit lacus. Morbi imperdiet lorem eu ipsum...</p>
        <a class="custom-blog-post-more-link" href="#">Read More</a>
      </div>
      <!-- end featured-post-text -->
    </div>
  </li>

  <li class="custom-blog-listing-item">
    <div class="custom-blog-listing-content">
      <img class="custom-blog-post-image" alt="Description of image" src="https://images.pexels.com/photos/157213/pexels-photo-157213.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
      />
      <div class="custom-blog-post-text">
        <!--post summary-->
        <div class="custom-blog-post-header">
          <h2><a href="#">Headline of the article - This one is longer than others</a></h2>
        </div>
        <i>Published on <span class="custom-blog-post-date"> Jun 21, 2018</span></i>
        <p>Here are a few lines of text that summarize the post content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a pretium ligula, vel suscipit lacus. Morbi imperdiet lorem eu ipsum...</p>
        <a class="custom-blog-post-more-link" href="#">Read More</a>
      </div>
      <!-- end featured-post-text -->
    </div>
  </li>

  <li class="custom-blog-listing-item">
    <div class="custom-blog-listing-content">
      <img class="custom-blog-post-image" alt="Description of image" src="https://images.pexels.com/photos/147411/italy-mountains-dawn-daybreak-147411.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
      />
      <div class="custom-blog-post-text">
        <!--post summary-->
        <div class="custom-blog-post-header">
          <h2><a href="#">Headline of the article</a></h2>
        </div>
        <i>Published on <span class="custom-blog-post-date"> Jun 21, 2018</span></i>
        <p>Here are a few lines of text that summarize the post content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a pretium ligula, vel suscipit lacus. Morbi imperdiet lorem eu ipsum...</p>
        <a class="custom-blog-post-more-link" href="#">Read More</a>
      </div>
      <!-- end featured-post-text -->
    </div>
  </li>

  <li class="custom-blog-listing-item">
    <div class="custom-blog-listing-content">
      <img class="custom-blog-post-image" alt="Description of image" src="https://images.pexels.com/photos/289796/pexels-photo-289796.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
      />
      <div class="custom-blog-post-text">
        <!--post summary-->
        <div class="custom-blog-post-header">
          <h2><a href="#">Headline of the article - This one is longer than others</a></h2>
        </div>
        <i>Published on <span class="custom-blog-post-date"> Jun 21, 2018</span></i>
        <p>Here are a few lines of text that summarize the post content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a pretium ligula, vel suscipit lacus. Morbi imperdiet lorem eu ipsum...</p>
        <a class="custom-blog-post-more-link" href="#">Read More</a>
      </div>
      <!-- end featured-post-text -->
    </div>
  </li>

</ul>
  
</div>
/* Import existing fonts */
@import url('https://fonts.googleapis.com/css?family=Roboto');

.page-center {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

ul {
  padding-left: 0;
}

/* Two-column Blog Listings */
.custom-featured-blog-listing, .custom-blog-listing-content, .custom-blog-listing-item, .custom-blog-listing-content {
  box-sizing: border-box;
}

.custom-blog-listing {
  display: flex;
  flex-wrap: wrap;
}

.custom-blog-listing-item {
	display: flex; 
  padding: 0.5em;
	width: 100%;
}

@media all and (min-width: 40em) {
  .custom-blog-listing .custom-blog-listing-item {
    width: 50%;
  }
}

@media all and (min-width: 60em) {
  .custom-blog-listing .custom-blog-listing-item {
    width: 50%;
  }
}

.custom-blog-listing-content {
/*display: flex; This seemed to break it on IE but no other browser */
  flex-direction: column;
	width: 100%;
}

.custom-blog-listing-content p {
	flex: 1 0 auto;
}

/* Custom Blog Post Styling */

.custom-blog-listing-content {
  border: 1px #d9d9d9 dashed;
  border-radius: 5.6px;
}

.custom-blog-post-image {
  border-top-left-radius: 5.6px;
  border-top-right-radius: 5.6px;
  box-sizing: border-box;
  width: 100%;
  height: auto;
}

.custom-blog-post-text {
  border-bottom-left-radius: 5.6px;
  border-bottom-right-radius: 5.6px;
  padding: 24px;
}

.custom-blog-posts-wrapper .custom-blog-post-text {
  min-height: 325px; /* Update this based on max characters */  
}

.custom-blog-post-header a {
  color: #161616;
  text-decoration: none;
  font-family: Roboto,Arial, Sans-Serif;
  font-size: 25px;
  font-weight: 400;
  line-height: 32px;
  transition-delay: 0s;
  transition-duration: 0.3s;
  transition-property: color;
  transition-timing-function: ease;
}

.custom-blog-post-header a:hover {
  color: #05c2dd;
}

.custom-blog-post-text {
  font-family: Roboto,Arial, Sans-Serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 25px;
  color: #505050;
}

.custom-blog-post-more-link {
  text-decoration: none;
  color: #05c2dd;
}

.custom-blog-post-more-link:hover {
  color: #505050;
}

/* Hover effects on all featured posts */
.custom-blog-listing-content:hover .custom-blog-post-image, 
.custom-blog-featured-listing-content:hover .custom-blog-post-image {
  transition: all 0.5s ease;
  filter: brightness(88%);
}

.custom-blog-listing-content:hover,
.custom-blog-featured-listing-content:hover {
  transition: all 0.5s ease;
  background-color: rgba(5, 194, 221, 0.1);
}

/* Featured Post */

.custom-blog-featured-listing-content {
  display: table;
  border: 1px #d9d9d9 dashed;
  border-radius: 5.6px;
}


@media screen and (min-width:640px) { 
  
  /* Main Featured Image */
  .custom-featured-blog-listing .custom-blog-post-image {
    box-sizing: border-box;
    border-top-left-radius: 5.6px;
    border-top-right-radius: 5.6px;
  }
  
  .custom-featured-blog-listing .custom-blog-post-text {
    box-sizing: border-box;
  }
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.