flex layout (product card fork)

by James Connolly

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<div class="wrapper">

  <div class="product-cards mq masonry">

    <a href="#" class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150x250" />
      </div>
      <div class="product-cta">
        <p>product second-line</p>
        <span><i class="fas fa-arrow-right"></i></span>
      </div>
    </a>
    
    <a href="#" class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/100x250" />
      </div>
      <div class="product-cta">
        <p>product second-line</p>
        <span><i class="fas fa-arrow-right"></i></span>
      </div>
    </a>
    
    <a href="#" class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/50x150" />
      </div>
      <div class="product-cta">
        <p>product second-line</p>
        <span><i class="fas fa-arrow-right"></i></span>
      </div>
    </a>

  </div>
  <!-- product-cards -->

</div>
<!-- wrapper -->

SCSS

body {
  font-family: arial, helvetica, sans-serif;
  margin: 0;
  padding: 0;
}

.wrapper {
  margin: 50px auto;
  width: 100%;
  max-width: 800px;

  &.mq {
    max-width: 400px;
  }
}

// end project styles

.product-cards {
  
  .product-card {
    display: block;
    margin-bottom: 20px;
    padding: 35px;
    box-sizing: border-box;
    background-image: radial-gradient(51% 106%, #EFF4F3 28%, #28D7F8 100%);
    border-radius: 6px;
    color: navy;
    text-decoration: none;
    position: relative;
    transition: all 0.3s ease;
    
    p {
      margin: 0;
    }

    span {
      display: inline-block;
      padding-left: 35px;
    }
    
    .product-image, .product-cta {
      position: relative;
      z-index: 10;
    }
    
    .product-image {
      text-align: center;
			margin-bottom: 35px;
    }
    
    .product-cta {
      display: flex;
      flex-flow: row no-wrap;
      align-items: center;
      justify-content: space-between;
      font-size: 20px;
    }
    
    &:before {
      content: '';
      width: 100%;
      height: 100%;
      background-image: linear-gradient(180deg, rgba(40,215,248,0.56) 1%, rgba(2,154,219,0.72) 99%);
      border-radius: 6px;
      opacity: 0;
      visibility: hidden;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
      transition: all 0.3s ease;
    }
    
    &:hover {
      color: white;
      
      &:before {
        opacity: 1;
        visibility: visible;
      }
    }
  }
  
  // media query
  
  &.mq {
  	// for 2 cards MAX
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		
		.product-card {
			width: calc(50% - 10px);
		}
  	
		// for 3 cards MAX
  	&.masonry{
			display: flex;
			flex-flow: column wrap;
			justify-content: space-between;
			height: 700px;
			min-height: 500px;
    
			.product-card {
				display: flex;
				flex-flow: column;
				margin-bottom: 0;
				width: calc(40% - 20px;);
				height: calc(50% - 35px);
				min-height: calc(50% -...