.hero-copy {
  position: relative;
  background-color: var(--ink);
  background-image:
    linear-gradient(90deg, rgba(17,13,10,.83) 0%, rgba(17,13,10,.72) 54%, rgba(17,13,10,.67) 100%),
    linear-gradient(0deg, rgba(17,13,10,.84) 0%, rgba(17,13,10,.18) 58%, rgba(17,13,10,.58) 100%),
    url("/assets/workshop/workshop-02.webp?v=1");
  background-position: center, center, 52% center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hero-copy::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 0 auto;
  width: 1px;
  background: rgba(255,255,255,.09);
  pointer-events: none;
}

.hero-copy > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 980px) {
  .hero-copy {
    background-image:
      linear-gradient(90deg, rgba(17,13,10,.82), rgba(17,13,10,.69)),
      linear-gradient(0deg, rgba(17,13,10,.88), rgba(17,13,10,.2) 58%, rgba(17,13,10,.62)),
      url("/assets/workshop/workshop-02.webp?v=1");
    background-position: center, center, 58% center;
  }
}

@media (max-width: 680px) {
  .hero-copy {
    background-image:
      linear-gradient(90deg, rgba(17,13,10,.86), rgba(17,13,10,.74)),
      linear-gradient(0deg, rgba(17,13,10,.9), rgba(17,13,10,.24) 56%, rgba(17,13,10,.68)),
      url("/assets/workshop/workshop-02.webp?v=1");
    background-position: center, center, 62% center;
  }
}