.hero {
  {#max-width: 900px;#}
  margin: 20px auto;
  padding: 20px;
}
.hero h1 {
  font-size: 70px;
  font-weight: 500;
  line-height: 1.1em;
}
.hero h2 {
  font-size: 36px;
  font-weight: 300;
  line-height: 1.4em;
}
@media (max-width: 767px) {
  .hero {
    flex-direction: column-reverse;
  } 
}
.hero .videos {
  overflow: hidden;
}
.hero .videos .video {
  float: left;
}
.hero .videos .video .mask {
  -webkit-mask-image: url('https://8696823.fs1.hubspotusercontent-na1.net/hubfs/8696823/Website/Video/homepage/circle-mask.svg');
  -webkit-mask-size: contain;
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  margin: 20px;
  height: fit-content;
  line-height: 0;
}
.hero .videos .video .clip {
  width: 100%;
  height: 100%;
}
@media (max-width: 767px) {
  .hero .videos .video-2 {
    width: 100%;
  }
  .hero .videos .video-3 {
    display: none;
  }
  .hero .videos .video-1 {
    display: none;
  }
  .hero .heading-large {
    font-size: 50px;
    text-align: center;
  }
  .hero h2 {
    font-size: 26px;
    text-align: center;
  }
  .hero .buttons {
    flex-direction: column;
    gap: 1.8rem;
    justify-content: center;
    align-items: center;
  }
  .hero > div {
    gap: 50px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero .videos .video-2 {
    width: 80%;
  }
  .hero .videos .video-3 {
    width: 60%;
  }
  .hero .videos .video-1 {
    width: 40%;
  }
}
@media (min-width: 1024px) and (max-width: 1365px) {
  .hero .videos .video-2 {
    width: 55%;
  }
  .hero .videos .video-3 {
    width: 45%;
    margin-top: -20px;
  }
  .hero .videos .video-1 {
    width: 30%;
    margin-left: -60px;
  }
}
@media (min-width: 1366px) {
  .hero .videos .video-2 {
    width: 55%;
  }
  .hero .videos .video-3 {
    width: 45%;
    margin-top: -20px;
  }
  .hero .videos .video-1 {
    width: 30%;
    margin-left: -60px;
  }
}