/* -- The root styles must go in the element of the structure with the name "Hero Section". --*/
.Hero {
  --Hero-speed-animation: 35s;
  --Hero-transparency-size: 50px;
	overflow : hidden !important	;
  .Hero__container-img{
    overflow : hidden !important	;
    /* If you do not want the gradient masks at the top and bottom you can remove these styles */
    -webkit-mask-image: linear-gradient(to bottom, #000, #000, transparent 0, #000 var(--Hero-transparency-size), #000 calc(90% - var(--Hero-transparency-size)), transparent);
  }

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

      .Hero__img-wrapper{
        margin-bottom: var(--space-m);

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

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

      .Hero__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%);}
}