.s-visual-band {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--c-bg);
}

.s-visual-band .vb-figure {
  position: relative;
  display: block;
  width: 100%;
  height: 60vh;
  min-height: 320px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
}

.s-visual-band .vb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 0;
}

.s-visual-band .vb-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--c-primary) 70%, transparent) 0%,
    color-mix(in srgb, var(--c-primary) 40%, transparent) 45%,
    color-mix(in srgb, var(--c-primary) 10%, transparent) 100%
  );
}

.s-visual-band .vb-caption {
  position: absolute;
  inset-block-end: 24px;
  inset-inline-start: 24px;
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-text);
  text-align: start;
  text-shadow: 0 1px 2px color-mix(in srgb, var(--c-bg) 60%, transparent);
}

@media (max-width: 900px) {
  .s-visual-band .vb-figure {
    height: 50vh;
    min-height: 280px;
  }
  .s-visual-band .vb-caption {
    inset-block-end: 20px;
    inset-inline-start: 20px;
  }
}

@media (max-width: 600px) {
  .s-visual-band .vb-figure {
    height: 40vh;
    min-height: 240px;
  }
  .s-visual-band .vb-caption {
    inset-block-end: 16px;
    inset-inline-start: 16px;
    font-size: 12px;
    letter-spacing: 0.18em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .s-visual-band .reveal {
    transition: none;
  }
}