:root {
  --space-bigger: 120px;
  --space-big: 80px;
  --space-med: 40px;
  --space-small: 20px;
  --space-smaller: 16px;
  --space-smallest: 8px;

  --container-padding: 4%;
  --grid-gap: var(--space-small);
  --card-padding: var(--space-med);
  --header-height: var(--space-big);
  --btn-height: 56px;
  --border-radius: 8px;
  --trans: .2s;

  --black: #333333;
  --brand: #0000E6;
  --n200: #D0D0D0;
  --n900: #161616;

  --border: 1px solid var(--n200);

  --lh-text: 150%;
  --lh-title: 115%;

  --bold: 500;
  --regular: 400;
  --light: 300;
}


@media (width <= 1024px) {
  :root {
    --space-bigger: 96px;
    --space-big: 64px;
    --space-med: 32px;
    --space-small: 16px;
    --space-smaller: 12px;
    --space-smallest: 6px;

    --container-padding: 5%;
    --header-height: 56px;
    --btn-height: 40px;
  }
}

@media (width <= 560px) {
  :root {
    --space-bigger: 64px;
    --space-big: 40px;
    --space-med: 20px;
    --space-small: 12px;
    --space-smaller: 8px;
    --space-smallest: 4px;
  }
}