.how-art {
  min-height: 0;
  margin: 0;
  padding: 10px;
  background: linear-gradient(145deg, #8e682d, #30200f 42%, #b48a3e 55%, #3b2711);
  border: 1px solid #d6ae5c;
  box-shadow:
    -18px 18px 0 #4c2d1647,
    0 28px 60px #0008,
    0 0 36px #e8b84d1c;
  transform: rotate(-1deg);
}

.how-art::before { content: none; }

.how-art img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #2d1b0d;
  filter: saturate(.96) contrast(1.04);
}

.how-art figcaption {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 44px);
  padding: 9px 15px;
  color: #f1d487;
  background: #100b06dd;
  border: 1px solid #c99a43;
  box-shadow: 0 6px 18px #0009;
  font: 700 9px ui-monospace, monospace;
  letter-spacing: .16em;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 930px) {
  .how-art { transform: none; }
}

@media (max-width: 580px) {
  .how-art { min-height: 0; padding: 6px; box-shadow: -9px 9px 0 #4c2d1647, 0 18px 38px #0008; }
  .how-art figcaption { bottom: 14px; font-size: 7px; letter-spacing: .1em; }
}