.image {
  --vhs-cyan-x: -3px;
  --vhs-red-x: 3px;
  border-radius: 0.375em;
  isolation: isolate;
  overflow: hidden;
}

.posts article:nth-child(6n + 2) .image,
.mini-posts article:nth-child(3n + 2) .image {
  --vhs-cyan-x: -4px;
  --vhs-red-x: 2px;
}

.posts article:nth-child(6n + 3) .image,
.mini-posts article:nth-child(3n) .image {
  --vhs-cyan-x: -2px;
  --vhs-red-x: 4px;
}

.posts article:nth-child(6n + 4) .image {
  --vhs-cyan-x: -5px;
  --vhs-red-x: 3px;
}

.posts article:nth-child(6n + 5) .image {
  --vhs-cyan-x: -3px;
  --vhs-red-x: 5px;
}

.posts article:nth-child(6n) .image {
  --vhs-cyan-x: -2px;
  --vhs-red-x: 3px;
}

.image .vhs-source {
  filter: contrast(1.18) saturate(0.72) sepia(0.12);
  position: relative;
  z-index: 0;
}

.image .vhs-channel {
  border-radius: inherit;
  height: 100% !important;
  inset: 0;
  object-fit: cover;
  opacity: 0.16;
  pointer-events: none;
  position: absolute;
  width: 100% !important;
  z-index: 1;
}

.image .vhs-channel-cyan {
  filter: grayscale(1) sepia(1) saturate(7) hue-rotate(125deg) contrast(1.25);
  mix-blend-mode: screen;
  transform: translateX(var(--vhs-cyan-x));
}

.image .vhs-channel-red {
  filter: grayscale(1) sepia(1) saturate(7) hue-rotate(305deg) contrast(1.25);
  mix-blend-mode: screen;
  transform: translateX(var(--vhs-red-x));
}

/* CD artwork opts out of VHS overlays, including the scanline layer. */
.image:not([data-no-vhs='true'])::after,
.member-photo.has-image::after {
  background: repeating-linear-gradient(
    0deg,
    rgba(5, 10, 15, 0.18) 0,
    rgba(5, 10, 15, 0.18) 1px,
    transparent 1px,
    transparent 4px
  );
  border-radius: inherit;
  content: '';
  inset: 0;
  mix-blend-mode: multiply;
  opacity: 0.55;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}