.grain-wrapper {
  position: relative;
  display: inline-block;
  width: fit-content; /* or remove */
  vertical-align: bottom; /* try bottom, top, or middle */
}



.grain-wrapper img {
  display: block;
  width: 100%;
  height: auto;
}

.grain-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  opacity: 1; /* default full opacity */
  mix-blend-mode: overlay;
}

/* grain opacity variations */
.grain-1 {
  opacity: 0.1;
}

.grain-2 {
  opacity: 0.2;
}

.grain-3 {
  opacity: 0.3;
}

.grain-4 {
  opacity: 0.4;
}

.grain-5 {
  opacity: 0.5;
}

.grain-6 {
  opacity: 0.6;
}

.grain-7 {
  opacity: 0.7;
}

.grain-8 {
  opacity: 0.8;
}

.grain-9 {
  opacity: 0.9;
}

.grain-10 {
  opacity: 1.0;
}