.container-pattern {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: radial-gradient(circle closest-side, mediumpurple, black, cyan);
  background-size: 50px 50px;

  @media (prefers-reduced-motion: reduce) {
    opacity: 0.5;
  }
}

.item {
  --size: 50px;
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    currentcolor 9px,
    #111 9px,
    #111 18px,
    transparent 18px
  );
  background-size: var(--size) var(--size);
  mix-blend-mode: difference;

  &.item-1 {
    color: rgb(0, 102, 255);
    background-position: -25px -25px;
  }

  &.item-2 {
    color: rgb(255, 50, 50);
    background-position: -35px -35px;
  }

  &.item-3 {
    color: rgb(50, 205, 50);
    background-position: 25px 25px;
  }
  &.item-4 {
    color: rgb(255, 165, 0);
    background-position: 35px 35px;
  }
}