- cards = [{ title: 'Departure from Wilanów', date: 1887, author: 'Józef Brandt', info: 'of John III Sobieski and Marysienka'},
           { title: 'Shiba Zôjôji', date: 1925, author: 'Hasui Kawase', info: 'from series "12 views of Tokyo"'},
           { title: 'Das große Rasenstück', date: 1503, author: 'Albrecht Dürer', info: 'study of wild plants'},
           { title: 'Długa Street', date: 1780, author: 'Bernardo Bellotto', info: "painted by king Stanisław August's court painter"}]

.screen
  - cards.each do |card|
    .card
      .front-box
        %h1 #{card[:title]}
        %p #{card[:info]}
      .details-1
        %p #{card[:author]}
      .details-2
        %p ~ #{card[:date]} ~

$bg-color:     #202B2E
$accent-color: #D8303D

$paintings: (1: 'https://upload.wikimedia.org/wikipedia/commons/1/19/Brandt_Departure_from_Wilan%C3%B3w.jpg', 2: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Kawase_Z%C3%B4j%C3%B4ji.jpg/398px-Kawase_Z%C3%B4j%C3%B4ji.jpg', 3: 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Albrecht_D%C3%BCrer_-_The_Large_Piece_of_Turf%2C_1503_-_Google_Art_Project.jpg/467px-Albrecht_D%C3%BCrer_-_The_Large_Piece_of_Turf%2C_1503_-_Google_Art_Project.jpg', 4: 'https://upload.wikimedia.org/wikipedia/commons/e/ed/Bellotto_Bridgettine_Church_and_Arsenal.jpg?1465410364618')

%details
  background-color: white
  position: relative
  height: 70px
  z-index: -10
  transition: all .5s ease-in-out
  display: flex

html
  background-color: $bg-color
  display: flex
  justify-content: center
  align-items: center
  height: 100vh
  font-family: 'IM Fell French Canon'
  
body
  perspective: 800px

body *
  transform-style: preserve-3d

p, h1
  margin: 0
  font-weight: 700

.screen
  width: 400px
  margin: 50px
  padding-top: 120px
  background: transparent
  transform: rotate3d(0,1,0, -0deg)
  .card
    margin: 0
    height: 200px
    transition: height .5s ease-in-out
    @each $id, $painting in $paintings
      &:nth-of-type(#{$id})
        .front-box
          background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url($painting)
          background-size: cover
    
    .front-box
      height: 200px
      box-sizing: border-box
      display: flex
      flex-direction: column
      justify-content: center
      align-items: center
      overflow: hidden
      &:hover
        cursor: pointer
        h1
          border-bottom: 2px solid $accent-color
        p
          opacity: 1
      h1
        border-bottom: 2px solid transparent
        padding-bottom: 5px
        top: 55px
        left: 20px
        color: white
        z-index: 20
        transition: all .4s ease-in-out
      p
        color: white
        font-style: italic
        padding-top: 10px
        font-weight: 400
        opacity: 0
        transition: all .5s ease-in-out .2s
          
      .img-wrapper
        height: 200px
        overflow: hidden
        width: 100%
        height: 100%    
    .details-1
      @extend %details
      transform: rotate3d(1, 0, 0, -90deg)
      transform-origin: top
      box-shadow: inset 0px -45px 52px 0px rgba(0,0,0,0.75)
      p
        margin: auto
    .details-2
      @extend %details
      transform: translate3d(0, -140px, 0px) rotate3d(1, 0, 0, 90deg)
      transform-origin: bottom
      box-shadow: inset 0px 0px 100px 30px rgba(0,0,0,0.75)
      p
        margin: auto
  
.unfold
  height: 70px
  transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0deg) !important
  box-shadow: inset 0px -45px 52px -70px rgba(0,0,0,0.75) !important

.span
  height: 340px !important

  

        

$(document).ready(function(){
    $('.card').click(function(){
        $(this).find('.details-1, .details-2').toggleClass('unfold').parents('.card').siblings().children('.details-1, .details-2').removeClass('unfold');
        $(this).toggleClass('span').siblings('.card').removeClass('span');
    });
});