.lighthouse-watermark {
  position: relative;
  isolation: isolate;
}

.lighthouse-watermark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: min(76vw, 1050px) auto;
  opacity: 0.14;
}

.lighthouse-watermark--left::before {
  background-image: url("lighthouse-watermark-left.png");
  background-position: left center;
}

.lighthouse-watermark--right::before {
  background-image: url("lighthouse-watermark-right.png");
  background-position: right center;
}

.lighthouse-watermark--islet::before {
  background-image: url("lighthouse-watermark-islet.png");
  background-position: right center;
}

.lighthouse-watermark--cliff::before {
  background-image: url("lighthouse-watermark-cliff.png");
  background-position: left center;
}

.lighthouse-watermark--sloop::before {
  background-image: url("sailboat-watermark-sloop.png");
  background-position: left center;
}

.lighthouse-watermark--schooner::before {
  background-image: url("sailboat-watermark-schooner.png");
  background-position: right center;
}

.lighthouse-watermark > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  .lighthouse-watermark::before {
    background-size: min(88vw, 360px) auto;
    opacity: 0.1;
  }

  .lighthouse-watermark--left::before,
  .lighthouse-watermark--cliff::before,
  .lighthouse-watermark--sloop::before {
    background-position: left -36px bottom 12px;
  }

  .lighthouse-watermark--right::before,
  .lighthouse-watermark--islet::before,
  .lighthouse-watermark--schooner::before {
    background-position: right -36px bottom 12px;
  }

  #home.lighthouse-watermark::before {
    background-size: min(72vw, 280px) auto;
    background-position: right -55px top 590px;
    opacity: 0.08;
  }
}