:root {
  --vv-section-gradient: linear-gradient(90deg, #081b36 0%, #153968 55%, #1d5278 100%);
  --vv-section-fade: clamp(34px, 9vw, 155px);
}

.vv-photo-section {
  position: relative;
  isolation: isolate;
  background: var(--vv-section-gradient);
  color: #fff8ea;
}

.vv-editorial-photo.vv-planes-about,
.vv-editorial-photo.vv-plans-faq {
  background: var(--vv-section-gradient);
  color: #fff8ea;
}

.vv-editorial-photo .vv-cf__questions { color: var(--vv-cf-ink); }

.vv-photo-section__background {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  --vv-photo-fade: min(30%, var(--vv-section-fade));
  mask-image: linear-gradient(to bottom,
    transparent, #000 var(--vv-photo-fade),
    #000 calc(100% - var(--vv-photo-fade)), transparent);
}

.vv-photo-section__background picture,
.vv-photo-section__background img {
  display: block;
  width: 100%;
  height: 100%;
}

.vv-photo-section__background img { object-fit: cover; }

.vv-photo-section__background::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, rgba(9, 20, 38, .66), rgba(9, 20, 38, .48) 52%, rgba(9, 20, 38, .68));
}