:root {
  --color-navy: #263449;
  --color-white: #FFFFFF;
  --color-cream: #FAF0E9;
  --color-bronze: #A8804F;
  --color-gray-100: #EEEEEE;
  --color-gray-200: #E2E2E2;
  --color-gray-400: #8C93A0;

  --font-sans: 'Figtree', sans-serif;
  --font-serif: 'Fraunces', serif;

  --ease: cubic-bezier(.17, .84, .44, 1);
  --dur: 1.109s;

  --container-pad: 24rem;
  --container-max: 375rem;
}

@media (min-width: 768px) {
  :root {
    --container-pad: 64rem;
    --container-max: 1920rem;
  }
}

html {
  font-size: calc(100vw / 375);
}

@media (min-width: 768px) {
  html {
    font-size: calc(100vw / 1920);
  }
}