.app#app
  .gallery
    .gallery-item(v-for="(item, index) in items" :key="index")
      img.gallery-image(:src="item.url" :alt="item.id")
    
    h1.app-title The dog gallery

.gallery
  position: relative
  margin: auto
  width: 80vmin
  display: grid
  grid-gap: 1vmin
  grid-auto-rows: 1fr
  grid-template-columns: repeat(6, 1fr)
  grid-auto-flow: dense
  
  &:before
    content: ''
    height: 0
    width: 100%
    padding-bottom: 100%
    grid-column: 1 / 1
    grid-row: 1 / 1
  
  &-item
    position: relative
    animation: flash 2s ease infinite alternate
    
    &:first-child
      grid-column: 1 / 1
      grid-row: 1 / 1
      
    &:nth-child(3n)
      grid-row: span 2
      
    &:nth-child(4n),
    &:nth-child(7n)
      grid-column: span 1
      grid-row: span 1
    
    &:nth-child(5n)
      grid-column: span 2
      
    &:hover
      .gallery-image
        transform: scale(0.9)
      
    @for $x from 1 through 5
      @for $y from 1 through 5
        &:nth-child(#{$x * $y})
          animation-delay: (.6s * ($x - 1) + .8s * ($y - 1)) / 1.5
  
  &-image
    height: 100%
    width: 100%
    object-fit: cover
    transition: transform .3s ease
    position: absolute

.app-title
  color: #fff
  letter-spacing: 1vmin
  text-align: center
  position: absolute
  width: 100%
  bottom: calc(100% + 1vmin)
  margin: 0
    
html, body, .app
  margin: 0
  width: 100%
  height: 100%
  display: flex
  background: #121212
  
html
  font-family: 'Six Caps', sans-serif
  
@keyframes flash
  to
    filter: brightness(1.25) contrast(.85) grayscale(1)

const api = 'https://api.thedogapi.com/v1/images/search?limit=25&size=thumb';

const param = {
  el: '#app',
  data: {
    items: []
  },
  methods: {
    getItems: function() {
      return fetch(api)
      .then(res => res.json());
    }
  },
  mounted: function() {
    this.getItems().then(data => this.$data.items = data);
  }
}

const app = new Vue(param);