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

  .cta-contact__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(--cta-contact-transparency-size), #000 calc(100% - var(--cta-contact-transparency-size)), transparent);
  }

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

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

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

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

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