/* Thymeleaf port of app/scss/background.scss */
:root {
  --background-mask-opacity: 0.61;
  --background-mask-mix-blend-mode: color-burn;
  --background-mask-background-image: url('/content/images/mask-group.png') center / cover no-repeat;
  --background-mask-background-color: var(--brand-red-gradient);
}

.background-mask {
  position: relative;
  background: var(--background-mask-background-color);
  isolation: isolate;
}

.background-mask::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--background-mask-background-image);
  opacity: var(--background-mask-opacity);
  mix-blend-mode: var(--background-mask-mix-blend-mode);
  pointer-events: none;
  border-radius: inherit;
}

.background-mask.red-gradient {
  --background-mask-background-color: var(--brand-red-gradient);
}

.background-mask.blue-gradient {
  --background-mask-background-color: var(--brand-blue-gradient);
}