* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: #514c40; }
.wall {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #625c4d url('assets/weathered-wall.webp') center / cover no-repeat;
}
.wall__scene { position: absolute; inset: 0; display: block; }
.wall__scene img { display: block; width: 100%; height: 100%; object-fit: cover; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 680px) {
  .wall__scene {
    inset: auto 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  }
  .wall__scene img { height: auto; }
}