%label{ :for => "checkbox" }
  .container
    <!-- mostly for mobile -->
    <input type="checkbox" id="checkbox">

    <img src="https://picsum.photos/1500/1000?image=1045">

    <h1 class="mobile-title">tap</h1>
    <h1 class="desktop-title">hover</h1>

    - (0..24).each do |x|
      - (0..24).each do |y|
        %div{ :class => "cover cover--x#{x} cover--y#{y}" }

html, body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  
  background-color: #21232f;
}

.container {
  position: relative;
  display: flex;
  flex-flow: column wrap;
  width: 750px;
  height: 500px;
}

img {
  position: absolute;
  z-index: 1;
  width: 100%;
  
  transition: z-index 0.4s;
  
  @media only screen and (min-width: 768px) {
    .container:hover & {
      z-index: 101;
    }
  }
  
  @media only screen and (max-width: 768px) {
    #checkbox:checked + & {
      z-index: 101;
    }
  }
}

h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 300;

  width: 100%;
  margin: 0;
  
  font-family: sans-serif;
  font-size: 200px;
  text-align: center;
  
  opacity: 1;
  background: url(https://picsum.photos/1500/1000?image=1045);
  background-size: 100%;
  background-clip: text;
  background-position: 0 -135px;
  -webkit-background-clip: text;
  color: transparent;
}

@media only screen and (max-width: 768px) {
  .desktop-title {
    display: none;
  }
}

@media only screen and (min-width: 768px) {
  .mobile-title {
    display: none;
  }
}

.cover {
  width: 4%;
  height: 4%;
  background-color: black;
  box-shadow: 0 0 1px transparent;
  opacity: 0.65;
}

#checkbox {
  display: none;
}

@for $x from 0 through 24 {
  @for $y from 0 through 24 {
    .cover--x#{$x}.cover--y#{$y} {
      z-index: random(100);
    }
  }
}