/* Apply to the section; select a modifier for its background colour. */
.bak-pattern {
  --bak-pattern-color: #103945;
  --bak-pattern-opacity: .08;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.bak-pattern::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 190%;
  height: 420%;
  right: -89%;
  top: -145%;
  background: var(--bak-pattern-color);
  opacity: var(--bak-pattern-opacity);
  -webkit-mask: url('./bakboord-logo-fragment.svg') center / contain no-repeat;
  mask: url('./bakboord-logo-fragment.svg') center / contain no-repeat;
}
.bak-pattern::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, var(--bak-pattern-surface) 2%, transparent 72%);
}
.bak-pattern--white {--bak-pattern-surface:#fff; background:#fff; color:#103945}
.bak-pattern--light {--bak-pattern-surface:#e8f7f9; background:#e8f7f9; color:#103945}
.bak-pattern--petrol {--bak-pattern-surface:#103945; --bak-pattern-color:#fff; --bak-pattern-opacity:.13; background:#103945; color:#fff}
@media(max-width:600px) {
  .bak-pattern::before {width:340%;right:-211%;height:290%;top:-80%}
  .bak-pattern::after {background:linear-gradient(90deg,var(--bak-pattern-surface) 18%,transparent 100%)}
}