/* =============================================
   ABSTRACT CSS
   Patterned / textured background overlays
   ============================================= */

.abstract,
.abstract-dark,
.abstract-gray,
.abstract-primary {
  background-size: 200px 200px;
}

/* Plain repeat (no overlay) */
.abstract {
  background-repeat: repeat;
}

/* Dark overlay variant */
.abstract-dark {
  position: relative;
  background-repeat: repeat;
}
.abstract-dark::before {
  content: '';
  pointer-events: none;
  position: absolute;
  display: block;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--primary-dark-hex);
  opacity: .75;
  mix-blend-mode: multiply;
}
.abstract-dark > * {
  position: relative;
  z-index: 2;
}

/* Gray overlay variant */
.abstract-gray {
  position: relative;
  background-repeat: repeat;
}
.abstract-gray::before {
  content: '';
  position: absolute;
  display: block;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-color: #333;
  opacity: .75;
  mix-blend-mode: multiply;
}
.abstract-gray > * {
  position: relative;
  z-index: 2;
}

/* Primary overlay variant */
.abstract-primary {
  position: relative;
  background-repeat: repeat;
}
.abstract-primary::before {
  content: '';
  position: absolute;
  display: block;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--primary-hex);
  opacity: .5;
  mix-blend-mode: multiply;
}
.abstract-primary > * {
  position: relative;
  z-index: 2;
}