.hero {
  background: var(--navy);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 20, 29, .98) 0%, rgba(7, 20, 29, .90) 37%, rgba(7, 20, 29, .28) 72%, rgba(7, 20, 29, .08) 100%),
    url("homepage-workshop.png") center / cover no-repeat;
}

.hero::after {
  inset: auto 0 0;
  width: auto;
  height: 5px;
  border: 0;
  transform: none;
  box-shadow: none;
  background: linear-gradient(90deg, var(--copper), transparent 46%);
}

@media (max-width: 820px) {
  .hero::before {
    background:
      linear-gradient(90deg, rgba(7, 20, 29, .98) 0%, rgba(7, 20, 29, .88) 62%, rgba(7, 20, 29, .38) 100%),
      url("homepage-workshop.png") 62% center / cover no-repeat;
  }

  .hero::after {
    width: auto;
  }
}