/* ----------------------------------------------------------------------------------- FILM GRAIN ----------------------------------------------------------------------------------- */


.grainy::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      background-image: url("/img/effects/Noise2.png");
      background-repeat: repeat;
      background-size: 50px 50px;
      mix-blend-mode: soft-light;
      opacity: 0.9;
      animation: grainFlicker 0.2s steps(2) infinite;
      z-index: 2;
      border-radius: 8px;
    }

    @keyframes grainFlicker {
      0% { background-position: 0px 0px; }
      25% { background-position: 40px 60px; }
      50% { background-position: -20px -40px; }
      75% { background-position: 60px -20px; }
      100% { background-position: 0px 0px; }
    }



/* ----------------------------------------------------------------------------------- Vignette ----------------------------------------------------------------------------------- */

.vignette {
  position: relative;
  width: 400px;
  height: auto;
}

.vignette img {
  display: block;
  width: 100%;
  height: auto;
}

.vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0) 60%,
    rgba(0, 0, 0, 0.7) 100%
  );
}