section.Grid
  - for (var i=0; i<3; i++)
    .Grid-row
      - for (var j=0; j<3; j++)
        - var id = (i*3 + j + 1)
        a.Card(onClick="openGallery("+id+")", id="card-"+id)
          .Card-thumb
            .Card-shadow
            .Card-shadow
            .Card-shadow
            .Card-image(style="background-image: url(https://robohash.org/"+id+")")
          .Card-title
            span Super interesting card
          .Card-explore
            span Explore 50 more
          button.Card-button view more
          
- for (var i=1; i<=9; i++)
  section.Gallery(id="gallery-"+i)
    .Gallery-header
      a.Gallery-close(onclick="closeAll()") ×
    .Gallery-images
      .Gallery-left
        .Gallery-image
        .Gallery-image
      .Gallery-image.Gallery-image--primary(style="background-image: url(https://robohash.org/"+i+")")
      
    - for (var j=1; j<=4; j++)
      .Gallery-images
        .Gallery-image
        .Gallery-image
        .Gallery-image

color-grey-1 = #F5F5F5
color-grey-9 = #212121

color-purple-1 = #673AB7
color-purple-2 = #3F51B5
color-purple-3 = #2196F3

color-card-bg = #607D8B
color-bg = #FFF
color-header = #eee

body
  background: color-grey-1
  font-family: 'Libre Franklin', sans-serif
  
.Grid
  width: 50rem
  margin: 5rem auto
  
  &-row
    display: flex
    justify-content: space-between
    margin-bottom: 2.5rem
  
.Card
  position: relative
  flex: 0 1 15rem
  background-color: white
  padding-bottom: 5rem
  transition: background-color .2s cubic-bezier(0.5, 0.3, 0.8, 0.06)
  color: #000
  
  &-thumb
    position: relative
    width: 15rem
    height: 10rem
    perspective-origin: 50% 0%;
    perspective: 600px
    z-index: 1
  
  &-image,
  &-shadow
    position: absolute
    display: block
    width: 15rem
    height: 10rem
    transition: all .2s cubic-bezier(0.42, 0.0, 0.58, 1.0)
    
  &-shadow
    opacity: .8
    
    &:nth-child(1)
      opacity: .6
      background-color: color-purple-1
      transition: all .2s cubic-bezier(0.42, 0.0, 0.58, 1.0) .07s
    &:nth-child(2)
      opacity: .7
      background-color: color-purple-2
      transition: all .2s cubic-bezier(0.42, 0.0, 0.58, 1.0) .05s
    &:nth-child(3)
      background-color: color-purple-3
      transition: all .2s cubic-bezier(0.42, 0.0, 0.58, 1.0) .03s
    
  &-image
    position: relative
    background-size: auto 100%
    background-position: center
    background-repeat: no-repeat
    background-color: color-card-bg
    
    &::before
      position: absolute
      top: 0
      right: 0
      bottom: 0
      left: 0
      background-color: color-purple-2
      content: ''
      opacity: 0
      transition: opacity .1s
  
  &-title,
  &-explore
    position: absolute
    bottom: 0
    display: flex
    align-items: center
    width: 100%
    height: 5rem
    text-align: center
    transition: all .2s cubic-bezier(0.5, 0.3, 0.8, 0.06)
    
    span
      padding: .5rem
      flex: 1 1 auto
      text-align: center
      
  &-explore
    opacity: 0
    transform: translate(0, -1rem)
    font-size: 0.75rem
    text-transform: uppercase
    letter-spacing: 1px
    color: color-purple-1
    
  &-button
    position: absolute
    left: 50%
    top: 5rem
    padding: .5rem 1rem
    background-color: #fff
    border-radius: 2rem
    border: 2px solid color-purple-2
    color: #fff
    font-size: .75rem
    font-weight: 600
    transform: translate(-50%, 2rem)
    cursor: pointer
    transition: all .2s
    opacity: 0
    outline: none
    z-index: 4
    
.Card:hover,
.Card--active
  background-color: color-grey-1
  cursor: pointer
  
  .Card
    &-thumb
      z-index: 3
    
    &-title
      opacity: 0
      
    &-explore
      opacity: 1
      transform: translate(0, 1rem)
      transition: all .2s cubic-bezier(0.42, 0.0, 0.58, 1.0) .1s
      
    &-image
      transform: scale(1.05) translate(0, -1rem) rotateX(25deg)
      
      &::before
        opacity: .4
      
    &-shadow:nth-child(3)
      transform: scale(1.02) translate(0, -.3rem) rotateX(15deg)
      
    &-shadow:nth-child(2)
      transform: scale(.9) translate(0, 1rem) rotateX(15deg)
    
    &-shadow:nth-child(1)
      transform: scale(.82) translate(0, 2.4rem) rotateX(5deg)
      
    &-button
      opacity: 1
      color: color-purple-2
      transform: translate(-50%, 0)
      
      &:hover
        color: #fff
        background-color: color-purple-2
        
.Card--active, .Card--active:hover
  background: none
  
  .Card
    &-explore
      opacity: 0
      transform: translate(0, 3rem)
      transition: all .5s cubic-bezier(0.42, 0.0, 0.58, 1.0)
      
    &-image
      opacity: 0
      transition: all .4s cubic-bezier(0.42, 0.0, 0.58, 1.0)
      transform: scale(1.05) translate(0, -2.5rem) rotateX(50deg)
      
      &::before
        opacity: .4
      
    &-button
      opacity: 0
      transition: all .35s cubic-bezier(0.42, 0.0, 0.58, 1.0)
      transform: translate(-50%, -2rem) scale(1, 0.4)

for r in (1..3)  
  .Grid-row:nth-child({r})
    dRow = r - 2
    for num in (1..3)
      .Card:nth-child({num})
        dCol = num - 2
        &.Card--active, .Card--active:hover
          .Card
            &-shadow:nth-child(3)
              transition: all .2s cubic-bezier(0.7, 0.0, 0.78, 1.0)
              transform: scale(1) translate(-108% + (dCol * -114%), -55% + (dRow * -168%))

            &-shadow:nth-child(2)
              transition: all .2s cubic-bezier(0.7, 0.0, 0.78, 1.0) .1s
              transform: scale(1) translate(-108% + (dCol * -114%), 55% + (dRow * -168%))

            &-shadow:nth-child(1)
              transition: all .2s cubic-bezier(0.7, 0.0, 0.78, 1.0) .2s
              transform: scale(2.1) translate(26%  + (dCol * -55%), (dRow * -80%))

.Gallery
  display: block
  position: fixed
  top: 0
  right: 0
  bottom: 0
  left: 0
  background: color-grey-1
  opacity: 0
  transform: scale(1.2)
  transition: none
  padding: 18rem 0
  overflow-y: scroll
  
  &-header
    position: absolute
    left: 0
    right: 0
    top: 0
    background-color: color-header
    padding-bottom: 5rem
    
  
  &-close
    position: absolute
    right: 1rem
    top: 1rem
    font-size: 3rem
    opacity: .5
    cursor: pointer
    
    &:hover
      opacity: .8
      
  &-images
    display: flex
    width: 47rem
    margin: 0 auto
    justify-content: space-between
    margin-bottom: 1rem
    
    for r in (3..6)  
      &:nth-child({r})
        transition: all 0.2s cubic-bezier(0.7, 0.0, 0.78, 1.0) (.11s * r)
        opacity: 0
        transform: translate(0, 3rem) scale(1.1)
    
  &-left
    flex: 1 auto
    display: flex
    justify-content: space-between
    flex-direction: column
      
  &-image
    display: block
    width: 15rem
    height: 9.5rem
    transition: all .2s cubic-bezier(0.42, 0.0, 0.58, 1.0)
    background: lighten(color-card-bg, 50%)
    background-size: auto 100%
    background-position: center
    background-repeat: no-repeat
    
    &--primary
      width: 31rem
      height: 20rem
      background-color: color-purple-1
  
.Gallery--active
  z-index: 100
  background: color-bg
  transform: scale(1)
  opacity: 1
  transition: all 0.5s cubic-bezier(0.7, 0.0, 0.78, 1.0) .1s
  
  .Gallery
    &-close
      display: block
      
    &-images
      opacity: 1
      transform: none

function openGallery(id) {
  closeAll();
  const gallery = document.getElementById('gallery-'+id);
  const card = document.getElementById('card-'+id);
  gallery.classList.add('Gallery--active');
  card.classList.add('Card--active');
}

function closeAll() {
  const galleryActv = document.querySelector('.Gallery--active');
  const cardActv = document.querySelector('.Card--active');
  if (galleryActv) {
    galleryActv.classList.remove('Gallery--active');
  }
  if (cardActv) {
    cardActv.classList.remove('Card--active');
  }
}