.background-pattern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('/img/bg1pc.webp');
  background-size: cover;
  background-position: center;
  z-index: 1;
}

@media (max-width: 420px) {
  .background-pattern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('/img/bg1mob.webp');
  background-size: cover;
  background-position: center;
  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;
}