.hero-bg-wrapper {
    pointer-events: none;
    position: absolute;
    width: 100%;
    overflow: hidden;
    height: 287px;
    top: 126px;
    z-index: -9991;
}

.hero-bg {
    left: calc(50vw - 624px);
    pointer-events: none;
    position: absolute;
    top: 50px;
    width: 1248px;
    overflow: hidden;
}

.bg-top {
    background-image: url(https://cdn.spgunk.eu.org/upload/images/bg-top.png);
    height: 202px;
    margin-bottom: 85px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
}

.bg-mask {
    mask-image: url(https://cdn.spgunk.eu.org/upload/images/bg-mask.png);
    transition: 1s cubic-bezier(.6, .6, 0, 1) opacity;
    left: 0;
    -webkit-mask-size: cover;
    mask-size: cover;
    top: 0;
    width: 100%;
    z-index: 9;
    mask-repeat: no-repeat;
    height: 100%;
    position: absolute;
}


.bg-mask>div {
    animation: anim 6s infinite cubic-bezier(.35, .35, .3, .7);
    background: linear-gradient(180deg, hsl(218 100% 50% / 0.5) 0%, hsl(218 100% 50%) 100%, hsl(218 100% 50%) 100%, hsl(218 100% 50% / 0.5) 0%);
    height: 200px;
    position: relative;
    top: 0;
    z-index: 88888;
    width: 100%;
}

@keyframes anim {
    0% {
        transform: translateY(-202px)
    }

    33%,
    to {
        transform: translateY(202px)
    }
}