.hero {
  background-image: url("hero-trades.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.hero::before {
  background:
    linear-gradient(90deg, rgba(5, 5, 5, .94) 0%, rgba(5, 5, 5, .82) 34%, rgba(5, 5, 5, .46) 67%, rgba(5, 5, 5, .30) 100%),
    linear-gradient(0deg, rgba(5, 5, 5, .72) 0%, transparent 44%, rgba(5, 5, 5, .20) 100%),
    repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), rgba(255,255,255,.07) 25%);
}

.hero-grid {
  text-shadow: 0 3px 24px rgba(0, 0, 0, .82);
}

.hero-foot {
  color: rgba(255, 255, 255, .72);
  border-top-color: rgba(255, 255, 255, .28);
}

@media (max-width: 820px) {
  .hero {
    background-position: 58% center;
  }

  .hero::before {
    background: linear-gradient(90deg, rgba(5,5,5,.94), rgba(5,5,5,.66)), linear-gradient(0deg, rgba(5,5,5,.76), transparent 55%);
  }
}