.hero-left { min-width: 0; }
.hero .home-heading {
  max-width: 100%;
  font-size: 44px;
  line-height: 1.18;
  letter-spacing: 0;
}
.hero-slogan {
  margin-top: 22px;
  color: var(--accent);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
}
.hero .hero-sub { color: rgba(238, 240, 245, .76); font-style: normal; }
@media (min-width: 1440px) { .hero .home-heading { font-size: 56px; } }
@media (min-width: 821px) and (max-width: 1150px) {
  .hero { grid-template-columns: minmax(0, 1fr) 400px; }
  .hero-left { padding-left: 32px; padding-right: 24px; }
  .hero-right { padding-right: 24px; }
  .hero .home-heading { font-size: 28px; }
}
@media (max-width: 820px) { .hero .home-heading { font-size: 36px; } }
@media (max-width: 480px) { .hero .home-heading { font-size: 27px; } }
@media (max-width: 359px) { .hero .home-heading { font-size: 23px; } }