.gallery
  figure
    img(src='https://devartiral.com/codepen/gallery-template-01.jpg' alt='a white kitten with brown and black spots sitting with its paws slightly outstretched. ' title='Photo by The Lucky Neko for Unsplash')
    figcaption Kitten: Ollie (12 Weeks)
  figure
    img(src='' alt='' title='Photo by Karsten Winegeart for Unsplash')
    figcaption Puppy: Barney (9 Weeks)
  figure
    img(src='https://devartiral.com/codepen/gallery-template-03.jpg' alt='A large long-haired orange cat with a white belly. ' title='Photo by Kabo for Unsplash')
    figcaption Cat: Walter (5 Years) 
  figure
    img(src='https://devartiral.com/codepen/gallery-template-04.jpg' alt='A light brown, long-haired chihuahua sitting next to three rubber duckies. ' title='Photo by Giacomo Lucarini for Unsplash')
    figcaption Dog: Miss Sunshine (2 Years) 
  figure
    .box
      img(src='https://devartiral.com/codepen/gallery-template-05.jpg' alt='A tabby kitten with green eyes. ' title='Photo by Sergey Semin for Unsplash')
    figcaption Kitten: Reese (8 Weeks)
  figure
    img(src='https://devartiral.com/codepen/gallery-template-06.jpg' alt='A light brown puppy standing on a white and tan woven pet bed. ' title='Photo by Sergey Semin for Unsplash')
    figcaption Puppy: Bruce (10 Weeks)

//https://coolors.co/ff595e-ffca3a-8ac926-52a675-1982c4-6a4c93
//https://coolors.co/b80006-b88700-6a9a1d-366d4d-10547e-4d376c
  
$color-1: #ff595e
$color-2: #ffca3a
$color-3: #8ac926
$color-4: #52a675
$color-5: #1982c4
$color-6: #6a4c93

$bg-1: #b80006
$bg-2: #b88700
$bg-3: #6a9a1d
$bg-4: #366d4d
$bg-5: #10547e
$bg-6: #4d376c

body
  margin: 0
  padding: 0
  color: white
  font-family: 'EB Garamond', serif
  font-size: 22px
  background-color: #a3c3f3
  
.gallery
  display: grid
  grid-gap: 5px
  grid-template-columns: repeat(auto-fit, minmax(350px, 3fr))
  grid-template-rows: auto

figure
  width: 220px
  height: 220px
  border-radius: 50%
  position: relative
  box-shadow: 1px 1px 10px 5px rgba(0,0,0,0.5)
  cursor: pointer
  img
    position: absolute
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)
    height: 180px
    width: 180px
    border-radius: 50%
    z-index: 2
  figcaption
    position: absolute
    top: 50%
    left: 50%
    width: 180px
    height: 180px
    transform: translate(-50%, -50%)
    border-radius: 50%
    display: flex
    align-items: center
    justify-content: center
    text-align: center
    text-shadow: 0px 0px 3px rgba(0,0,0,0.7)
    z-index: 1
    
figure
  &:nth-child(1)
    background-color: $color-1
  &:nth-child(2)
    background-color: $color-2
  &:nth-child(3)
    background-color: $color-3
  &:nth-child(4)
    background-color: $color-4
  &:nth-child(5)
    background-color: $color-5
  &:nth-child(6)
    background-color: $color-6
  
figure:nth-child(1)
  perspective: 800px
  img
    transform: translate(-50%, -50%) rotateY(0deg)
    transition: all 0.5s ease-in-out
    backface-visibility: hidden
  figcaption
    transform: translate(-50%, -50%) rotateY(180deg)
    transition: all 0.5s ease-in-out
    backface-visibility: hidden
    background-color: $bg-1
  &:hover
    img
      transform: translate(-50%, -50%) rotateY(180deg)
    figcaption
      transform: translate(-50%, -50%) rotateY(0deg)
  
      
figure:nth-child(2)
  img
    transform: translate(-50%, -50%) rotateY(0deg)
    transition: all 0.5s ease-in-out
    backface-visibility: hidden
    background-image: url('https://devartiral.com/codepen/gallery-template-02.jpg')
    background-size: 190px
    background-position: center
  figcaption
    background-color: $bg-2
  &:hover
    img
      height: 0px
      width: 0px

    
figure:nth-child(3)
  img
    transform: translate(-50%, -50%) rotateZ(0deg)
    transform-origin: bottom
    transition: all 0.5s ease-in-out
    z-index: 100
  figcaption
    background-color: $bg-3
  &:hover
    img
      transform: translate(-50%, -50%) rotateZ(180deg)
    
    
figure:nth-child(4)
  img
    opacity: 1
    filter: blur(0px)
    transition: all 0.5s ease-in-out
  figcaption
    background-color: $bg-4
  &:hover
    img
      opacity: 0.5
      filter: blur(5px)
    
    
figure:nth-child(5)
  .box
    position: absolute
    height: 180px
    width: 180px
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)
    overflow: hidden
    border-radius: 50%
    z-index: 2
    img
      transform: translate(-50%, -50%) rotateZ(0deg)
      transition: all 0.5s ease-in-out
  figcaption
    background-color: $bg-5
  &:hover
    .box
      img
        transform: translate(-150%, -50%) rotateZ(-180deg)

      
figure:nth-child(6)
  perspective: 500px
  img
    transform: translate(-50%, -50%) rotateX(0deg)
    transform-origin: top
    backface-visibility: hidden
    transition: all 0.5s ease-in-out
  figcaption
    background-color: $bg-6
  &:hover
    img
      transform: translate(-50%, -50%) rotateX(90deg)