watermark-component,
scrolling-watermark-component {
  position: absolute;
  opacity: 0.25;
  z-index: 10;

  --height: 20vh;

  top: calc(2 * var(--height) - 0.5 * var(--height));
  height: var(--height);
  width: var(--height);
  left: calc(-0.5 * var(--height));
  filter: none;
}

scrolling-watermark-component:not(.full) {
  --height: 10vh;

  position: fixed;
  filter: grayscale(100%);
  transition:
    width var(--animation-time),
    height var(--animation-time),
    top var(--animation-time),
    left var(--animation-time);
}

watermark-component img,
scrolling-watermark-component img {
  width: 100%;
  height: 100%;
}