- for(let c = 0; c < 13; c++)
  input.gallery__select(type="radio", name='gallery-select', id=c, checked=(c===0))
.gallery
  .gallery__filler
  .gallery__filler
  - for(let i = 0; i < 13; i++)
    label.gallery__item(for=i)
      img(src=`https://source.unsplash.com/random/400x400?bear,cat&v=${Math.floor(20 * Math.random() + i)}`, alt='Something random')

*
  box-sizing border-box
  animation  fadeIn .5s

body
  background       linear-gradient(65deg, black, black 20%, rebeccapurple)
  display          grid
  width            100vw
  padding-top      20px
  margin           0
  @media(min-width 768px)
    align-content center
    padding       20px

@keyframes fadeIn
  from
    opacity 0
  to
    opacity 1

img
  height 100%
  width 100%
  min-height 50px
  object-fit cover


.gallery
  display grid
  justify-content center
  grid-gap 20px
  grid-template-columns repeat(2, 100px) minmax(200px, 800px) repeat(2, 100px)
  grid-template-rows repeat(5, 100px)

  @media(max-width 768px)
    grid-gap 10px
    grid-template-columns repeat(auto-fit, 50px)
    grid-template-rows 300px repeat(auto-fit, 50px)

  &__filler
    grid-column span 2
    @media(max-width 768px)
      display none

  &__item
    cursor pointer
    border-radius 5px
    grid-row span 1
    grid-column span 1
    transition transform 0.1s ease-in-out

    &:hover
      transform scale(1.1) rotate(5deg)

  &__select
    display none

  for $select in (1..13)
    &__select:nth-of-type({$select})
      &:checked ~ .gallery .gallery__item:nth-of-type({$select})
        cursor default
        display grid
        align-items center
        grid-row 1 / -1
        grid-column 3

        &:hover
          transform none

        @media(max-width 768px)
          grid-row 1 / -3
          grid-column 1 / -1

// ?