.bg-image {
    z-index: -1;
    position: fixed;
    pointer-events: none;
}

#bg-1 {
    opacity: 60%;
    z-index: -100;
    top: 50px;
    background: url("/img/vectors/bg_clouds_back.svg") 0 0 / 3456px 360px repeat-x;
    background-size: 3456px;
    animation: scroll-bg-clouds 180s linear infinite;
}

#bg-2 {
    opacity: 80%;
    z-index: -99;
    top: 40px;
    background: url("/img/vectors/bg_clouds_front.svg") 0 0 / 3456px 360px repeat-x;
    background-size: 3456px;
    animation: scroll-bg-clouds 100s linear infinite;
}

.clouds-layer {
    
    
    width: 100vw;
    height: 360px;
}

@media (prefers-reduced-motion: reduce) {
  .clouds-layer {
    animation: none;
    background-position: center;
  }
}

@media (max-width: 600px) {
  .clouds-layer { display: none; }
}

@keyframes scroll-bg-clouds {
  from { background-position: calc(50% + 1728px) center; }
  to   { background-position: calc(50% - 1728px) center; /* width of one tile */ }
}