/* Shared value-proposition media frame and pointer response. */
[data-value-prop] {
  --value-pan-x: 0px;
  --value-pan-y: 0px;
  --value-scale: 1;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 336px;
  flex: none;
  border-radius: 16px;
}

[data-value-prop] > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(var(--value-pan-x), var(--value-pan-y), 0) scale(var(--value-scale));
  transition: transform 220ms ease-out;
  will-change: transform;
}

.pillar__art--view img {
  position: absolute;
  top: -15px;
  left: calc(100% + 28px);
  width: 366px;
  height: 500px;
  max-width: none;
  filter: hue-rotate(4deg);
  object-fit: contain;
  transform: translate3d(var(--value-pan-x), var(--value-pan-y), 0) rotate(90deg) scale(var(--value-scale));
  transform-origin: 0 0;
}

.service-card__visual--clarity span {
  position: absolute;
  top: -15px;
  right: -394px;
  width: 366px;
  height: 500px;
  background: var(--parchment) url("assets/kaleidoscope.svg") center/contain no-repeat;
  filter: hue-rotate(4deg);
  transform: translate3d(var(--value-pan-x), var(--value-pan-y), 0) rotate(90deg) scale(var(--value-scale));
  transform-origin: 0 0;
  transition: transform 220ms ease-out;
  will-change: transform;
}

@media (max-width: 680px) {
  [data-value-prop] {
    height: auto;
    aspect-ratio: 409 / 336;
  }
}