- let data = [
-   {
-     img: 'https://assets.codepen.io/2017/17_05_a_amur_leopard_12.jpg', 
-     lyr: { oxy: '-50%, -50%' }
-   },
-   {
-     img: 'https://assets.codepen.io/2017/17_05_a_amur_leopard_14.jpg', 
-     lyr: { oxy: '0, calc(var(--hov)*-100%)', spr: 'var(--l)' }
-   },
-   {
-     img: 'https://assets.codepen.io/2017/17_05_a_amur_leopard_33.jpg', 
-     lyr: { oxy: '50%, -50%' }
-   },
-   {
-     img: 'https://assets.codepen.io/2017/17_05_a_amur_leopard_25.jpg', 
-     lyr: { raz: '45deg', fxy: +Math.sqrt(2).toFixed(3) }
-   },
-   {
-     img: 'https://assets.codepen.io/2017/17_05_a_amur_leopard_16.jpg', 
-     lyr: { fxy: +Math.sqrt(2).toFixed(3) }
-   },
-   {
-     img: 'https://assets.codepen.io/2017/17_05_a_amur_leopard_18.jpg', 
-     lyr: {}
-   },
-   {
-     img: 'https://assets.codepen.io/2017/17_05_a_amur_leopard_13.jpg', 
-     lyr: { oxy: '-50%, 50%' }
-   },
-   {
-     img: 'https://assets.codepen.io/2017/17_05_a_amur_leopard_24.jpg', 
-     lyr: { oxy: '0, calc(var(--hov)*100%)', spr: 'var(--l)' }
-   },
-   {
-     img: 'https://assets.codepen.io/2017/17_05_a_amur_leopard_2.jpg', 
-     lyr: { oxy: '50%, 50%' }
-   }
- ];
- let n = data.length;

body(style=`--m: ${Math.ceil(Math.sqrt(n))}`)
  - for(let i = 0; i < n ; i++)
    - let c = data[i], s = [];
    - for(let p in c.lyr) { s.push(`--${p}: ${c.lyr[p]}`) }
    figure(style=s.join('; '))
      img(src=c.img)

@import 'compass/css3';

$s: .5em;

body, figure { display: grid; margin: 0 }

body {
  --l: Min(13em, calc((100vw - (var(--m) + 1)*#{$s})/var(--m)));
  box-sizing: border-box;
  grid-gap: $s;
  grid-template-columns: repeat(var(--m), var(--l));
  place-content: center;
  padding: $s;
  min-height: 100vh
}

figure {
  --hov: 0;
  overflow: hidden;
  
  &::before, &::after, img { grid-area: 1/ 1 }
  
  &::before, &::after {
    border-radius: var(--rad, 50%);
    transform: 
      translate(var(--oxy, 0, 0)) 
      rotate(var(--raz, 0deg)) 
      scale(var(--fxy, #{2*sqrt(2)}));
    box-shadow: inset 0 0 0 var(--spr, calc(.5*(1 - var(--hov))*var(--l))) hsl(0, 0%, 40%);
    mix-blend-mode: multiply;
    transition: .5s;
    pointer-events: none;
    content: ''
  }
  
  &:nth-child(2n) { --rad: 0; --fxy: 1 }
  
  &:hover { --hov: 1 }
}

img {
  width: var(--l);
  mix-blend-mode: luminosity;
}