.local-visual {
  position: relative;
  max-width: 1120px;
  height: clamp(300px, 44vw, 560px);
  margin: 85px auto 0;
  overflow: hidden;
  border-radius: 22px;
  background: #102f40;
  box-shadow: 0 28px 75px #0b293a26;
}

.local-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus) center;
  transform: scale(var(--zoom));
  filter: saturate(var(--sat)) hue-rotate(var(--hue));
  transition: transform .5s;
}

.local-visual:hover img { transform: scale(calc(var(--zoom) + .025)); }
.local-visual figcaption { position:absolute;right:18px;bottom:16px;padding:8px 12px;border-radius:999px;background:#061d28c9;color:#fff;font-size:11px;backdrop-filter:blur(8px); }
.local-visual.visual-1 { border-radius:90px 22px 22px 22px; }
.local-visual.visual-2 { border-radius:22px 90px 22px 22px; }
.local-visual.visual-3 { transform:rotate(-.35deg); }

@media (max-width: 700px) {
  .local-visual { width:88%;height:340px;margin-top:58px;border-radius:16px; }
  .local-visual.visual-1,.local-visual.visual-2 { border-radius:44px 16px 16px 16px; }
}