.card
  .card__img
    %img{"src" => "https://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-Black-Large.png"}
    .card__grid-effect
      -(1..100).each do |tile|
        %a{:class => "card__grid-effect-tile", "href" => "#"}
  
    

html,body{
  height: 100%;
}
body{
  background-color: #A9C9FF;
background-image: linear-gradient(180deg, #A9C9FF 0%, #FFBBEC 100%);
  background-size: 100% 100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.card{
  background: #fff;
  border-radius: 2rem;
  box-shadow:0 0 10rem -5rem;
  overflow: hidden;
  &__img{
    position: relative;
    height: 30rem;
    width: 30rem;
    display:flex;
    align-items:center;
    justify-content:center;
    > img {
        width: 10rem;
        position: relative;
        z-index: 1;
        pointer-events:none;
    }
  }
  &__grid-effect{
    position: absolute;
    z-index: 0;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
    &-tile{
        position: relative;
        &:before{
          content: '';
          color: #A9C9FF;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          height: 0.3rem;
          width: 0.3rem;
          border-radius: 50%;
          background: #A9C9FF;
          transition: 500ms linear all;
          $bxs: 0 0 0;
          $gap: 3rem;
          $coef: -0.3rem;
          @for $i from 1 through 4 {
            $bxs: $bxs + #{','}$i * $gap 0 0 $i *$coef#{','}$i * -$gap 0 0 $i *$coef#{','} 0 $i *-$gap 0 $i *$coef#{','} 0 $i *$gap 0 $i *$coef;
            
            @for $j from 1 through 4 {
              $bxs: $bxs + #{','}$i * $gap $j * $gap 0 $i*$j*1.5 *$coef#{','}$i * $gap $j * -$gap 0 $i*$j*1.5 *$coef#{','}$i * -$gap $j * $gap 0 $i*$j*1.5 *$coef#{','}$i * -$gap $j * -$gap 0 $i*$j*1.5 *$coef;
            }
          }
          box-shadow: $bxs;
        }
      &:hover{
        &:before{
          height: 3rem;
          width: 3rem;
          transition: 70ms linear all; 
        }
      }
    }
  }
}