/* A hero acompanha a mesma guia horizontal do logo em cada breakpoint. */
.hero .hero-content { text-align: left; }

@media (min-width: 901px) {
  .hero .hero-content {
    width: calc(100% - clamp(144px, 18.8vw, 354px));
    max-width: 1500px;
    margin-left: clamp(72px, 9.4vw, 177px);
    margin-right: auto;
  }

  .hero .hero-stats { width: min(760px, 100%); }
}

@media (max-width: 900px) {
  .hero .hero-content {
    width: min(100% - 30px, 1180px);
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 680px) {
  .hero .hero-content { width: calc(100% - 36px); }
}