/* ============================================================
   PAGE SPACING – same container sizes as melr.gov.gh (Bootstrap 5 container).
   Change the numbers, save, refresh the browser.
   ============================================================ */
:root{
  /* Space between the content and the screen edge (left AND right). melr.gov.gh uses 12px. */
  --gutter: 12px;

  /* Widest the content may be. These steps follow screen width exactly like melr.gov.gh:
       phones: full width | 576px+: 540 | 768px+: 720 | 992px+: 960 | 1200px+: 1140 | 1400px+: 1320
     To make everything wider (or narrower), change the numbers in the media queries below. */
  --max: 100%;

  /* Home banner: melr.gov.gh runs its banner edge to edge. To put it inside the page margins instead,
     set  --slider-max: var(--max);  --slider-gutter: var(--gutter); */
  --slider-max: 100%;
  --slider-gutter: 0px;
  --slider-radius: 0px;
}
@media(min-width:576px){:root{--max:540px}}
@media(min-width:768px){:root{--max:720px}}
@media(min-width:992px){:root{--max:960px}}
@media(min-width:1200px){:root{--max:1140px}}
@media(min-width:1400px){:root{--max:1320px}}