#hero-wrapper {
min-height:100dvh;
  height:790px;
  padding:32px;
  position:relative;
 }
.text-side {
    max-width: 55%;
    height: 100%;
    display: inline-flex;
    flex-direction: column;
    z-index:4;
    left: 32px;
    bottom: 32px;
    justify-content: flex-end;
}
.vis-vis {
    position: absolute;
}
.vis-hid {
  position:relative;
   visibility: hidden;
}

#main-text {
 margin-left:-4px;
  color: var(--GYSS-Base-White, #FFF);
/* Shadows/shadow-3xl */
text-shadow: 0px 152px 43px rgba(20, 20, 20, 0.02), 0px 97px 39px rgba(20, 20, 20, 0.15), 0px 55px 33px rgba(20, 20, 20, 0.50), 0px 24px 24px rgba(20, 20, 20, 0.85), 0px 6px 13px rgba(20, 20, 20, 0.98);
/* Display4xl/Extrabold */
font-family: "Rethink Sans";
font-size: 144px;
font-style: normal;
font-weight: 800;
line-height: 90%; /* 129.6px */
letter-spacing: -2.88px;
}

#sub-text {
  color: var(--GYSS-Charcoal-25, #F2F2F2);
/* Text xl/Extrabold */
font-family: "Rethink Sans";
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 120%; /* 24px */
margin-bottom: 12px;
    margin-top: 16px;
}

div#logos {
display: flex;
align-items: center;
gap: 38px;
}

div#image-scroller-section {
    position: absolute;
    top: 0;
    right: -5vw;
    overflow:hidden;
  height:100%;
   display:flex;
  gap:20px;
}

#mobile-gradient {
  position:absolute;
  width:100%;
  bottom:0;
  left:0;
}

 {# Animations #}
  @keyframes scbScroll {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(calc(-100%));
    }
  }


#image-scroller-section li {list-style: none;}
#image-scroller-section ul {
 padding:0;
  margin-bottom:0;
}
#column_1 .img_1 {
    margin-top: 339px;
}
#column_1 .img_2 {
    margin-top: 286px;
}
#column_1 .img_3 {
    margin-top: 45px;
}
#column_1 .img_4 {
    margin-top: 45px;
}
#column_1 .img_5 {
    margin-top: 286px;
}
#column_1 .img_6 {
    margin-top: 286px;
}
#column_1 .img_7 {
    margin-top: 45px;
}
#column_1 .img_8 {
    margin-top: 45px;
}

#column_2 .img_1 {
    margin-top: 64px;
}
#column_2 .img_2 {
    margin-top: 286px;
}
#column_2 .img_3 {
    margin-top: 45px;
}
#column_2 .img_4 {
    margin-top: 286px;
}
#column_2 .img_5 {
    margin-top: 286px;
}
#column_2 .img_6 {
    margin-top: 40px;
}

#column_3 .img_1 {
    margin-top: 0px;
}
#column_3 .img_2 {
    margin-top: 45px;
}
#column_3 .img_3 {
    margin-top: 286px;
}
#column_3 .img_4 {
    margin-top: 286px;
}
#column_3 .img_5 {
    margin-top: 45px;
}
#column_3 .img_6 {
    margin-top: 45px;
}
#column_3 .img_7 {
    margin-top: 285px;
}
#column_3 .img_8 {
    margin-top: 45px;
}


#image-scroller-section img {
  width:148px;
aspect-ratio:148/196;
  border-radius:56px;
 object-fit: cover;
}

/* smaller screens */

@container (max-width: 1200px) { 
#hero-wrapper {
  overflow:hidden;
    }
}
/* Mobile */
@media (orientation: portrait) {
  #hero-wrapper {
    /* aspect-ratio: 4 / 7; */
    min-height:10dvh;
  }
#image-scroller-section img {
   width:15.6vw;
  height:20.65vw;
  border-radius:5.98vw;
  }
  div#column_2 {
    display: none;
}
  .text-side {
    max-width: 100%;
  }
}


@media only screen 
  and (max-device-width: 767px) 
  { 
  /* #main-text {
font-family: "Rethink Sans Swap";
    }
     #hero-wrapper {
    opacity: 0; 
    animation: fadeIn 2s ease-in forwards; 
  }

  @keyframes fadeIn {
    from {
      opacity: 0; 
    }
    to {
      opacity: 1; 
    }
  } */
   
    div#mobile-gradient {
    height: 40%;
    z-index: 3;
    background: linear-gradient(to top, black, transparent);
}
    #logos :nth-child(n + 4 of img) {
 display:none;
}
    
    #logos img {
      max-width:15.88vw !important;
    }

#main-text {
font-size: 18.125vw;
font-style: normal;
font-weight: 800;
line-height: 90%; /* 52.2px */
letter-spacing: -1.16px;
}
#sub-text  { 
font-size:4.375vw;
    }
}