:root {
  --color-dark: #000;
  --color-white: #fff;
  --color-accent-primary: #99657d;
  --color-accent-primary-light: #8c5d73;
  --color-dark-grey: #363636;
  --color-bg: #e2e0e0;
  --serivce-gradient-c1: #000000b3;
  --serivce-gradient-c2: #000000b3;
  --vh: 100vh;
  --items: 1;
  --gap: 16px;
  --hero-bg: url('/assets/images/bg-family-law.webp');
}

.hero {
  background-position: center, 50% calc(50% + 30px);
}

@media (width >= 390px) {
  .hero {
    background-position: center, 50% calc(50% + 10px);
    background-size: cover, 120%;
  }
}

@media (width >= 1200px) {
  .hero {
    background-position: center, 50% calc(50% + 100px);
    background-size: 130%;
  }
}

@media (width >= 1440px) {
  .hero {
    background-position: center, 50% calc(50% + 200px);
    background-size: 140%;
  }
}

@media (width >= 1920px) {
  .hero {
    background-position: center, 50% calc(50% + 320px);
    background-size: 160%;
  }
}