.background-pattern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(circle at 12.5% 12.5%, transparent 48px, transparent 52px),
    radial-gradient(circle at 12.5% 87.5%, transparent 48px, transparent 52px),
    radial-gradient(circle at 87.5% 12.5%, transparent 48px, transparent 52px),
    radial-gradient(circle at 87.5% 87.5%, transparent 48px, transparent 52px);
  background-size: 200px 200px;
  background-position: 0 0, 0 0, 0 0, 0 0;
  z-index: 1;
}

.background-pattern::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    repeating-conic-gradient(from 0deg at 50px 50px,
      transparent 0deg,
      rgba(139, 69, 19, 0.1) 45deg,
      transparent 90deg,
      rgba(139, 69, 19, 0.1) 135deg,
      transparent 180deg,
      rgba(139, 69, 19, 0.1) 225deg,
      transparent 270deg,
      rgba(139, 69, 19, 0.1) 315deg,
      transparent 360deg
    );
  background-size: 100px 100px;
  opacity: 0.3;
}