Почему hover эффект не работает на ширине меньше 1200 пикселей?

Есть не большой hover эффект (Называется эффект Роршаха)

Проблема в том что при маленьких экранах этот эффект не работает не знаю почему.

У меня в коде используется SCSS поэтому я вставлью SCSS код на данный эффект можете посмотреть тут

Если увеличьите страницу то увидите что эффект работает очень даже хорошо если у вас конечно размер окна больше 1200 пикселей если меньше то эффект будет работать только раз при наведении один раз сработал и все а у меня на локальном вообше и то не работает при маленькой ширине

Подскажите что не так и как это исправить ?

SCSS

@mixin button($bcolor, $url, $x1, $y1, $bor, $col) {
    background: $bcolor;
    -webkit-mask: url($url);
    mask: url($url);
    -webkit-mask-size: $x1 $y1;
    mask-size: $x1 $y1;
    border: $bor;
    color: $col;
}
$default-white:#fff;
$default-black:#000;
.button-container-3 {
    position: relative;
    overflow: hidden;
    transition: 0.5s;
    top: 30%;
    display: block;
    border-radius: 2px;
    background: $default-black;
    width: 140px;
    height: 40px;
    border: none;
    font-size: 12px;
    font-family: "helvetica-neue";
    font-weight: 500;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    @media only screen and(max-width: 990px) {
        width: 120px;
        height: 35px;
    }
    a {
        color: $default-white;
        font-size: 12px;
        font-weight: 500;
        font-style: normal;
        font-stretch: normal;
        line-height: normal;
        letter-spacing: 0.9px;
        text-align: left;
        text-transform: uppercase;
        &:hover {
            text-decoration: none;
        }
    }
    button {
        text-transform: uppercase;
        border-radius: 2px;
        font-family: "helvetica-neue";
        font-style: normal;
        font-stretch: normal;
        line-height: normal;
        letter-spacing: 0.9px;
        width: 101%;
        height: 100%;
        @include button($default-white, "https://github.com/robin-dela/css-mask-animation/blob/master/img/nature-sprite-2.png?raw=true", 7100%, 100%, none, #2a323d);
        cursor: pointer;
        -webkit-animation: ani2 0.7s steps(70) forwards;
        animation: ani2 0.7s steps(70) forwards;
        &:hover {
            -webkit-animation: ani 0.7s steps(70) forwards;
            animation: ani 0.7s steps(70) forwards;
        }
    }
}
.mas {
    text-transform: uppercase;
    font-family: "helvetica-neue";
    font-weight: 500;
    position: absolute;
    color: $default-white;
    text-align: center;
    width: 101%;
    position: absolute;
    margin-top: 12px;
    overflow: hidden;
}
@-webkit-keyframes ani {
    from {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
    to {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }
}
@keyframes ani {
    from {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
    to {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }
}
@-webkit-keyframes ani2 {
    from {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }
    to {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
}
@keyframes ani2 {
    from {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }
    to {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
}

HTML

<div class="button-container-3">
  <span class="mas">Read more  &rarr;</span>
  <button type="button" name="Hover">Read more  &rarr;</button>
</div>