:root {
  --color-dark: #000;
  --color-white: #fff;
  --color-accent-primary: #252e18;
  --color-accent-primary-light: #506432;
  --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-military-law.webp');
}

.hero {
  background-position: calc(50% + 60px) 0;
  background-size: 250%;
}

@media (width >= 390px) {
  .hero {
    background-size: 200%;
  }
}

@media (width >= 480px) {
  .hero {
    background-size: 180%;
  }
}

@media (width >= 1200px) {
  .hero {
    background-size: 130%;
  }
}

@media (width >= 1440px) {
  .hero {
    background-size: 120%;
  }
}