section.layout-article
  ul.box-article
    li.list-article.wow.flipInY
      article.box-article
        a(href="")
          h1 Gummies fruitcake cupcake candy tart sesame snaps apple pie halvah.
          p Sweet roll lemon drops chupa chups. Candy canes icing soufflé ice cream tiramisu jelly-o macaroon sweet roll chocolate cake. Cake bear claw gummies topping candy canes liquorice muffin halvah.
          
    li.list-article.wow.flipInY(data-wow-delay="0.3s")
      article.box-article
        a(href="")
          h1 Gummies fruitcake cupcake candy tart 
          figure
            img(src="https://images.unsplash.com/photo-1441906363162-903afd0d3d52?ixlib=rb-0.3.5&q=80&fm=jpg&s=51953479f1ce3812d6fc2bc7d82ecea4", alt="")
          p Sweet roll lemon drops chupa chups. Candy canes icing soufflé ice cream tiramisu jelly-o macaroon sweet roll chocolate cake. Cake bear claw gummies topping candy canes liquorice muffin halvah.
          
    li.list-article.wow.flipInY(data-wow-delay="0.6s")
      article.box-article
        a(href="")
          h1 Gummies fruitcake cupcake candy tart sesame snaps apple.  
          figure
            img(src="https://images.unsplash.com/photo-1443527216320-7e744084f5a7?ixlib=rb-0.3.5&q=80&fm=jpg&s=6fbde3ee76bc8f49caf14c89778b2210", alt="")
          p Sweet roll lemon drops chupa chups. Candy canes icing soufflé ice cream tiramisu jelly-o macaroon sweet roll chocolate cake. Cake bear claw gummies topping candy canes liquorice muffin halvah.
          
    li.list-article.wow.flipInY(data-wow-delay="0.9s")
      article.box-article
        a(href="")
          h1 Gummies fruitcake cupcake 
          p Sweet roll lemon drops chupa chups. Candy canes icing soufflé ice cream tiramisu jelly-o macaroon sweet roll chocolate cake. Cake bear claw gummies topping candy canes liquorice muffin halvah.
          
    li.list-article.wow.flipInY(data-wow-delay="1.2s")
      article.box-article
        a(href="")
          h1 Cake apple pie candy canes liquorice.
          p Sweet roll lemon drops chupa chups. Candy canes icing soufflé ice cream tiramisu jelly-o macaroon sweet roll chocolate cake. Cake bear claw gummies topping candy canes liquorice muffin halvah.
 
    li.list-article.wow.flipInY(data-wow-delay="1.5s")
      article.box-article
        a(href="")
          h1 Gummies fruitcake cupcake candy tart sesame snaps apple pie
          figure
            img(src="https://images.unsplash.com/photo-1440470177828-6381dc5074ba?ixlib=rb-0.3.5&q=80&fm=jpg&s=6faf705d60f9804d03079755fb323a9a", alt="")
          p Sweet roll lemon drops chupa chups. Candy canes icing soufflé ice cream tiramisu jelly-o macaroon sweet roll chocolate cake. Cake bear claw gummies topping candy canes liquorice muffin halvah.
 
a.credit(href="http://tlab.co.id/", target="_blank")
    

@import "compass";

/* variabel */
$break-small: 480px;
$break-large: 1024px;
$primary-color :#24cf5f;

/* mixin */


@mixin respond-to($media) {
  @if $media == handhelds {
    @media only screen and (max-width: $break-small) { @content; }
  }
  @else if $media == medium-screens {
    @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) { @content; }
  }
 
}

@mixin column-break-inside($v) {
   -webkit-column-break-inside: $v;
	    -moz-column-break-inside: $v;
	         column-break-inside: $v;
}

@mixin column-count($vc) {
      -moz-column-count: $vc;
   -webkit-column-count: $vc; 
	         column-count: $vc;
}

@mixin column-gap($vg) {
   -webkit-column-gap: $vg;
	    -moz-column-gap: $vg;
	         column-gap: $vg;
}

@mixin column-fill($vf) {
   -webkit-column-fill: $vf;
	    -moz-column-fill: $vf;
	         column-fill: $vf;
}



html,body {
  background:#f1f1f1;
  font-family: 'Raleway', sans-serif;
}
 a {
   text-decoration :none;
}
.layout-article {
  max-width:1027px;
  margin:0 auto;
  padding:40px 0px;
  
  ul.box-article {
    list-style:none;
	  @include column-count(3);
	  @include column-gap(0px); 
    li {
      display:inline-block;
	    @include column-break-inside(avoid);
      padding:25px;
      background :#ffffff;
      height:auto;
      overflow:hidden;
      margin:15px;
      position:relative;
      @include box-shadow(0 1px 2px rgba(0,0,0,.1));
      article {
        width:100%;
        h1 {
          @include transition(0.3s ease);
          font-size: 24px;
          line-height: 31px;
          font-weight:600;
          color :#191919;
          margin-bottom:15px;
        }
        figure {
          width:100%;
          img {
           width:100%;
          }
        }
        p {
            margin-top:15px;
            font-size :16px;
            line-height:26px;
            font-weight:500;
            color: #5E5E5E;
          }
        span {
          
          width:100%;
          display:block;
          padding:15px;
          text-align:center;
          background :$primary-color;
           
          margin-left:-15px;
          color:#ffffff;
          @include translateY(15px);
          @include transition(0.3s ease);
        }
      }
      &:hover {
        article {
          h1 {
            color :$primary-color;
          }
          span {
            /* @include translateY(0px); */
          }
        }
      }
    }
    @include respond-to(handhelds) {
      @include column-count(1);
    }
     @include respond-to(medium-screens) {
      @include column-count(2);
    }
  }
}

.credit {
  position:fixed;
  bottom:15px;
  right:15px;
  width:150px;
  height:100px;
  background:url(http://tlab.co.id/images/logo.png)no-repeat center center;
  
  
  
}

new WOW().init();