main
  .title
    h2 Textures & Patterns
    h3 by Unsplash
    
  .container
    ul#gallery
      li
        .item
          .img
            img(src="https://images.unsplash.com/photo-1579710118605-991e5fd8baf3?ixlib=rb-1.2.1&auto=format&fit=crop&w=1234&q=80")
            h2 Mitchell Luo

      li
        .item
          .img
            img(src="https://images.unsplash.com/photo-1579379235188-009e04d34aee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2168&q=80")
            h2 Tomáš Malík
        
      li
        .item
          .img
            img(src="https://images.unsplash.com/photo-1559116770-57f118238385?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1273&q=80")
            h2 Natalya Letunova
        
      li
        .item
          .img
            img(src="https://images.unsplash.com/photo-1559456751-057ed03f3143?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2276&q=80")
            h2 Seyedeh Hamideh Kazemi

      li
        .item
          .img
            img(src="https://images.unsplash.com/photo-1554393683-f3782b25ec1b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80")
            h2 Martin Woortman

      li
        .item
          .img
            img(src="https://images.unsplash.com/photo-1565638459249-c85cbb2faaa8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80")
            h2 Paweł Czerwiński
        
      li
        .item
          .img
            img(src="https://images.unsplash.com/photo-1567712200021-20639e891b7a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80")
            h2 Maksim Shutov

*{box-sizing: border-box; outline: 0px;}
ul,ol,li{list-style: none; padding: 0px; margin: 0px;}

body {
  display: block;
  margin: 0px;
  color: #000;
  font-family: "montserrat";
  background-color: #fff;
}

.title{
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 100;
  width: 100vw;
  height: auto;
  padding: 8vh 0px 0px 0px;
  text-align: center;
  h2{
    margin: 0px;
    padding: 0px;
    font-family: "Abhaya Libre";
    font-size: 4vw;
    font-weight: 600;
    opacity: .7;
  }
  h3{
    margin: 0px;
    padding: 0px;
    font-size: 1.5vw;
    font-weight: 500;
    opacity: .3;
  }
}


.slick-arrow {
  display: block;
  position: fixed;
  z-index: 10000;
  width: 24vw;
  height: 100vh;
  border: 0px;
  text-indent: -9000px;
  overflow: hidden;
  opacity: 0;
  &.slick-prev {
    top: 0px;
    left: 0px;
    cursor:w-resize;
  }
  &.slick-next {
    top: 0px;
    right: 0px;
    cursor:e-resize;
  }
  &.none {
    display: none;
  }
}

.slick-list {overflow: visible!important;}

.container {
  display: block;
  width: 100vw;
  height: 100vh;
  margin: 0px 0px 0px 0px;
  padding: 0px;
  overflow: hidden;
}

ul {
  display: block;
  position: absolute;
  top: calc(50% - 25vh);
  height: 50vh;
  .slick-current li {
    .item {
      opacity: 1;
    }
  }
  li {
    display: block;
    position: relative;
    width: 100%;
    height: 50vh;
    margin: 0px;
    padding: 0px;
    .item {
      display: block;
      height: 100%;
      margin: 0 auto;
      opacity: 0.6;
      .img {
        display: block;
        position: relative;
        top: calc(50% - 12vw);
        width: 24vw;
        height: 24vw;
        margin: 0 auto;
        text-align: center;
        cursor:zoom-in;
        img {
          display: block;
          position: relative;
          z-index: 10;
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: 50% 50%;
          border-radius: 6px;
        }
        img.shad {
          position: absolute;
          top: 2vw;
          left: 0px;
          z-index: 0;
          border-radius: 6px;
          transform: scale(1.1);
          filter: blur(30px);
          opacity: .6;
        }
      }
      h2 {
        position: absolute;
        bottom: -4vw;
        right: 0;
        color: #000;
        width: 100%;
        z-index: 10;
        text-align: center;
        font-weight: 600;
        font-size: 1.2vw;
        opacity: .2;
        transition: all .5s ease;
      }
    }
  }
}


ul.detail {
  li {
    .item {
      opacity: 0;
      .img {
        transform: scale(.6);
      }
    }
  }
  .slick-current li {
    .item {
      opacity: 1;
      .img {
          width: 34vw;
          cursor:zoom-out;
        img {
          transform: scale(2.6);
        }
      }
      h2 {
        opacity: 1;
        color: #fff;
        transform: scale(2);
        text-shadow: 0px 0px 10px #333;
        bottom: -16vw;
      }
    }
  }
}


*{transition: all .5s ease}

var gallery = $("#gallery");

function sliderTilt(){
	var itemPrev = gallery.find(".slick-current").prev("li").find(".item");
	var itemNext = gallery.find(".slick-current").next("li").find(".item");

	$(".item").tilt({
		perspective: 300,
		speed: 2000,
		glare: false,
		maxGlare: .2
		});
	itemPrev.tilt.destroy.call(itemPrev);
	itemNext.tilt.destroy.call(itemNext);
}


gallery.on('init', function(event, slick){
	$(sliderTilt);
});

gallery.on('afterChange', function(event, slick, currentSlide){
	$(sliderTilt);
});


gallery.slick({
	dots: false,
	arrows: true,
	infinite: false,
	centerMode: true,
	focusOnSelect: false,
	speed: 1000,
	centerPadding: "24vw",
	slidesToScroll: 1,
	initialSlide: 4,
  draggable: false
});

$(".img").each(function() {
  $(this).append("<img class=\"shad\" src=\"" + $(this).find("img").attr("src") + "\" />");
});
  
  
$(function() {
	$(".img").click(function(){
		if(!$("#gallery").hasClass("detail")){
			$("#gallery").addClass("detail");
      $(".slick-arrow").addClass("none");
		} else if ($("#gallery").hasClass("detail")){
			$("#gallery").removeClass("detail");
      $(".slick-arrow").removeClass("none");
			console.log("overview");
		}
	});
});