Cards

<main>
  <section class="cards">
   <div class="grid">
  <div class="cards__grid">
   <article class="card">
      <a class="card__link" href="https://youtu.be/IOaFh-yJk_k" target="_blank">
        <figure class="card__figure"><img src="https://source.unsplash.com/HzEb3ZRtV88/900x600"/></figure>
        <div class="card__content">
          <span class="card__meta link-nested" data-nested-link="https://codepen.io/StephenScaff/">Nested Link</span>
          <h3 class="card__title">Girls ain't nothing but trouble</h3>
          <p class="card__text">Listen homeboys don't mean to bust your bubble, but girls of the world ain't nothing but trouble.</p>
            
            <span class="card__btn">Read More</span>
        </div>
     </a>
  </article>
  
  <article class="card">
      <a class="card__link" href="https://youtu.be/OMnbw-AM4VA" target="_blank">
        <figure class="card__figure"><img src="http://source.unsplash.com/-udZnjsCzsE/900x600"/></figure>
        <div class="card__content">
          <span class="card__meta link-nested" data-nested-link="https://codepen.io/StephenScaff/">The Nested  Link</span>
          <h3 class="card__title">Nightmare on my street</h3>
          <p class="card__text">But when I got home and laid down to sleep, that began the nightmare, but on my street!</p>
            
            <span class="card__btn">Read More</span>
        </div>
     </a>
  </article>
  </div>
  </div>
</section>
</main>
//Автор: Stephen Scaff. @StephenScaff

*, *:before, *:after {
  box-sizing: border-box;
}

html, body {
  background: #efefef;
  font-family: Poppins, helvetica;
}

body {
  margin: 0;
  width: 100%;
  font-weight: 400;
  font-style: normal;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
@media (max-width: 76em) and (min-width: 40em) {
  body {
    font-size: 80%;
  }
}

main {
  padding: 2em 0 4em;
}

a {
  text-decoration: none;
  color: #1c1c1c;
}

.link-nested {
  position: relative;
  display: block;
  margin-bottom: 0.5em;
  color: #2bd6de;
  cursor: pointer;
  transition: color 0.5s ease;
}
.link-nested:hover {
  color: #aaa;
}

.grid {
  margin: 0 auto;
  width: 95%;
  max-width: 60em;
}

.content {
  text-align: center;
}
.content p {
  max-width: 39em;
  margin: 0 auto;
  padding: 0 2%;
}

.cards {
  padding: 2em 0;
}
@media (min-width: 40em) {
  .cards__grid {
    display: flex;
    flex-direction: row;
    flex-flow: wrap;
    justify-content: center;
    margin: 0 -1em;
  }
}
@media (min-width: 40em) {
  .cards__grid > * {
    width: 50%;
    max-width: 50%;
    flex-basis: 50%;
    padding: 1em;
  }
}

.card {
  position: relative;
  display: block;
  margin-bottom: 1em;
}
.card__link {
  position: relative;
  display: block;
  margin-bottom: 2em;
  transition: transform 0.5s ease-in-out;
}
.card__link:hover {
  transform: translate3d(0, -0.4em, 0);
}
.card__link:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 4em rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.card__link:hover:before {
  opacity: 1;
}
.card__figure {
  margin: 0;
}
.card__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
}
.card__content {
  padding: 2em 2em;
  background: #fff;
  min-height: 21em;
}
.card__meta {
  margin-bottom: 1em;
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.card__title {
  margin: 0 0 0.25em;
  font-size: 1.7em;
  line-height: 1.4;
}
.card__text {
  margin-bottom: 1em;
  color: #aaa;
}
.card__btn {
  display: block;
  margin: 1em 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}
@media (min-width: 40em) {
  .card__btn {
    position: absolute;
    bottom: 1em;
  }
}

var NestedLinks = (function () {
    var nestedLinks = document.querySelectorAll("[data-nested-link]");
  
    return {
      /**
       * Init
       */
      init: function () {
        this.buildLink();
      },
  
      /**
       * Build Link
       * Constructs our nested link from our data attribute
       */
      buildLink: function () {
        Array.from(nestedLinks).forEach(function (nestedLink) {
          nestedLink.addEventListener("click", function (e) {
            var fakieLink = this.dataset.nestedLink;
            fakieLink &&
              (e.preventDefault(),
              e.stopPropagation(),
              window.open && e.metaKey
                ? window.open(fakieLink)
                : window.location.assign(fakieLink));
          });
        });
      }
    };
  })();
  NestedLinks.init();