/* -- The root styles must go in the element of the structure with the name "Hero Section". --*/
.hero-32 {
  --hero-32-speed-animation: 35s;
  --hero-32-transparency-size: 50px;

  .hero-32__container-img{
    /* If you do not want the gradient masks at the top and bottom you can remove these styles */
    -webkit-mask-image: linear-gradient(to top, #000, #000, transparent 0, #000 var(--hero-32-transparency-size), #000 calc(100% - var(--hero-32-transparency-size)), transparent);
  }

  /* Column left styles */
  .hero-32__column:first-child{    
    .hero-32__column-img {
      animation-name: vertical-scroll-btt;
      animation-duration: var(--hero-32-speed-animation);
      animation-iteration-count: infinite;
      animation-timing-function: linear;

      .hero-32__img-wrapper{
        margin-bottom: var(--space-m);

        @media(max-width: 991px){
          margin-bottom: var(--space-s);
        }
      }
    }
  }

  /* Column right styles */
  .hero-32__column:last-child{
    .hero-32__column-img{
      animation-name: vertical-scroll-ttb;
      animation-duration: var(--hero-32-speed-animation);
      animation-iteration-count: infinite;
      animation-timing-function: linear;

      .hero-32__img-wrapper{
        margin-top: var(--space-m);

        @media(max-width: 991px){
          margin-top: var(--space-s);
        }
      }
    }
  }

}



/*-- Animation bot to top ↑ --*/
@keyframes vertical-scroll-btt {
  from {transform: translateY(0%);}
  to {transform: translateY(-100%);}
}

/*-- Animation top to bot ↓ --*/
@keyframes vertical-scroll-ttb {
  from {transform: translateY(-100%);}
  to {transform: translateY(0%);}
}