.text-center
  h1.page-title CSS Hover Effect
  p.page-description Dealing with dynamic content size
  .food-card
    h2 Short description
    .card
      h4.cat-flag Healthy
      .card-img.image-ratio
        .ratio-inner
          img(src="https://media2.s-nbcnews.com/j/newscms/2017_10/1200234/10-healthy-fast-food-meals-008-subway-inline-today-170309_89a32509f1b93e969a831a913cc2a2d1.today-inline-large.jpg", alt="food")
      .card-content
        .content
          h3.title Healthy fast food
          p.description I'm not a fan of all of the processed carbs in the bread here, but this whole grain sandwich is as clean and simple as you can get. It's all veggies!!

  .food-card
    h2 Long description
    .card
      h4.cat-flag Asian Food
      .card-img.image-ratio
        .ratio-inner
          img(src="http://sp00kje.nl/wp-content/uploads/2017/07/585be1aa1600002400bdf2a6.jpeg", alt="food")
      .card-content
        .content
          h3.title Asian Food 
          p.description According to experts and economists, Asia will soon experience the next renaissance and it will be as grand and as pivotal as what Europe had experienced in the Middle Ages. But while most Asian countries are still in the third-world status we see another side of it flourishing and already fulfilling this prophecy
  .food-card
    h2 style-2 for badge
    .card
      h4.cat-flag.style-2 Asian Food
      .card-img.image-ratio
        .ratio-inner
          img(src="http://sp00kje.nl/wp-content/uploads/2017/07/585be1aa1600002400bdf2a6.jpeg", alt="food")
      .card-content
        .content
          h3.title Asian Food 
          p.description According to experts and economists, Asia will soon experience the next renaissance and it will be as grand and as pivotal as what Europe had experienced in the Middle Ages. But while most Asian countries are still in the third-world status we see another side of it flourishing and already fulfilling this prophecy

$mainFont: 'Nunito', sans-serif;
$mainColor: #2266aa;
$mainColorDark: #184e84;

.image-ratio{
  position: relative;
  overflow: hidden;
  &:before{
    content: '';
    display: block;
    padding-top: 100%;
  }
  .ratio-inner{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    width: 100%;
    height: 100%;
    img{
      width: 100%;
      min-height: 100%;
    }
  }
}

.text-center{
  text-align: center;
}
p{
  font-weight: 400;
}
body{
  font-family: $mainFont;
}
.page-title{
  color: #9a3299;
  margin: 0 0 5px;
}
.page-description{
  font-size: 16px;
  color: #777;
  margin: 0 0 20px;
}
.food-card{
  width: 300px;
  margin: 0 20px;
  display: inline-block;
  
    margin-bottom: 30px;
    .card{
      position: relative;
      text-align: left;
      .cat-flag{
        position: absolute;
        top: 8px;
        left: -5px;
        z-index: 2;
        
        font-size: 13px;
        font-weight: 400;

        padding: 3px 5px 3px 5px;
        color: #fff;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
        background-color: $mainColor;
        &:not(.style-2){

          &:before, &:after{
            content: '';
            display: block;
            position: absolute;
            right: 100%;
            border-right: 10px solid $mainColor;
          }
          &:before{
            top: 0;
            border-bottom: 13px solid transparent; 
            border-top: 0 solid transparent; 
          }
          &:after{
            bottom: 0;
            border-top: 13px solid transparent; 
            border-bottom: 0 solid transparent; 
          }
        }
        &.style-2{
          left: -20px;
          &:after {
            content: '';
            border-right: 20px solid $mainColorDark;
            border-bottom: 10px solid transparent;
            border-left: 0 solid transparent;
            

            position: absolute;
            top: 100%;
            left: 0;
            z-index: 2;
          }
        }
      }
      .card-img{
        text-align: center;
        background-color: #000;
        img{
          transition: transform 0.7s;
          opacity: 0.8;
        }
        
      }
      &:before{
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        z-index: 1;

        height: 70px;
        display: block;
 
        background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
 
      }
      .card-content{
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 3;
        overflow: hidden;
        .content{
          transition: transform 0.4s;
          transform: translateY(100%);
          
          /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,1+100 */
          background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
          background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
          background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
          

        }
        .title{
          color: #fff;
          font-weight: 600;
          font-size: 24px;
          transform: translateY(-100%);
          transition: transform 0.4s;
          margin-top: 0;
          margin-bottom: 0;
          padding: 0 15px 15px;
        }
        .description{
          padding: 0 15px;
          color: #fff;
          font-size: 13px;
          margin: 0;
        }
      }
      &:hover{
        .card-content{
          .content{
            padding-bottom: 15px;
            transform: translateY(0);
          }
          .title{
            transform: translateY(0);
          }
        }
      }
    }
  }