* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: $font-family-serif;
  font-size: rem(18);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: $font-family-sans-serif;
}

h1 {
  font-size: rem(30);
  font-weight: 600;
  letter-spacing: rem(2);
  line-height: (36/30);
  margin: 0;
}

h2 {
  font-size: rem(16);
  font-weight: normal;
  line-height: (30/16);
  margin: 0;
}

.ml-auto {
  margin-left: auto;
}

.mr-auto {
  margin-right: auto;
}

:root {
  --brand-primary: $brand-primary;
  --brand-secondary: $brand-secondary;
}

a {
  color: var(--brand-primary, $brand-primary);
  text-decoration: none;
}

.primary {
  color: var(--brand-primary, $brand-primary);
}

.bg-primary {
  background-color: var(--brand-primary, $brand-primary);
}

.b--primary {
  border-color: var(--brand-primary, $brand-primary);
}

.secondary {
  color: var(--brand-secondary, $brand-secondary);
}

.bg-secondary {
  background-color: var(--brand-secondary, $brand-secondary);
}

.b--secondary {
  border-color: var(--brand-secondary, $brand-secondary);
}