/* https://cssduotone.com/ */
/* CSS variables. Not needed for the effect to work. */
:root {
  --base: #FCFCFC; /* ghostWhite; /* ivory; /*floralWhite; /* #fff8dc; */
  --bg-blend: multiply;
  --blur: 0px;
  --fg-blend: lighten;
  --foreground: #483d8b;
  --opacity: 1;
  --spacing: 0px; /* 1%; */
}
.img-wrapper {
  background-color: var(--base);
  display: block; /* flex; */
  /* flex: 1 1 100%; */
  height: auto; /* 100%; */
  overflow: hidden;
  padding: var(--spacing);
  position: relative;
  box-shadow: 0px 3px 24px rgba(72,61,139,0.15);
  margin-bottom: 1em;
}
.img-wrapper:hover img {
  background-color: transparent;
  filter: none;
  mix-blend-mode: normal;
}
/* dont show ::before on hover */
.img-wrapper:hover::before {
  display: none;
}


.img-wrapper img {
  display: block;
  float: left;
  filter: grayscale(100%) contrast(1) blur(var(--blur));
  /* flex: 1 0 100%; */
  height: auto; /* 100%; */
  max-width: 100%;
  mix-blend-mode: var(--bg-blend);
  object-fit: cover;
  opacity: var(--opacity);
  position: relative;
  width: 100%;
  
}

.img-wrapper::before {
  background-color: var(--foreground);
  bottom: 0;
  content: '';
  height: 100%;
  left: 0;
  mix-blend-mode: var(--fg-blend);
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 1;
}

/*
<!-- HTML Markup -->

<!-- You should think of `img-wrapper` as the image itself. This element is what you should target for sizing/styling. -->
<div class="img-wrapper">
  <!-- The `::before` pseudo-element will apear here in the Broweser(DOM) and in web-inspector. -->
  <img src="https://picsum.photos/1000?image=874">
</div>
*/