.hero-craft {
  width: min(470px, 100%);
  margin: 0;
  justify-self: end;
  position: relative;
}
.hero-craft::before {
  content: "";
  position: absolute;
  inset: -18px 18px 18px -18px;
  border: 1px solid rgba(255, 255, 255, .24);
}
.hero-craft img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 48% center;
  filter: saturate(.82) contrast(1.02);
  position: relative;
}
.hero-craft figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 56px 24px 22px;
  color: var(--cream);
  background: linear-gradient(transparent, rgba(28, 31, 26, .82));
}
.hero-craft figcaption span {
  display: block;
  margin-bottom: 6px;
  font-size: .67rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.hero-craft figcaption strong {
  font: 600 1rem Manrope, sans-serif;
}
@media (max-width: 850px) {
  .hero-craft {
    width: min(420px, calc(100% - 18px));
    justify-self: center;
  }
}