/* Backgrounds
========================================================================== */

.bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.bg-green {
  background-color: var(--c-green);
}
.bg-white {
  background-color: var(--c-white);
}
.bg-black {
  background-color: var(--c-black);
}


/* Color
========================================================================== */

body .c-white {
  color: var(--c-white);
}
body .c-green {
  color: var(--c-green);
}



/* Font Size
========================================================================== */

.fs-es {
  font-size: .83em;
}
.fs-s {
  font-size: .91em;
}
.fs-b {
  font-size: 1.16em;
}
.fs-eb {
  font-size: 1.24em;
}

@media (min-width: 768px) {
  .fs-b {
    font-size: 1.21em;
  }
  .fs-eb {
    font-size: 1.33em;
  }
}

@media (min-width: 1600px) {
  .fs-b {
    font-size: 1.33em;
  }
  .fs-eb {
    font-size: 1.45em;
  }
}



/* WIDTH
========================================================================== */

.max-heading-width {
  max-width: 100vw;
}

@media (min-width: 1024px) {
  .max-heading-width {
    max-width: 50vw;
  }
}



/* MARGINS
========================================================================== */

.mt-es {
  margin-top: 0.75rem;
}
.mb-es {
  margin-bottom: 0.75rem;
}

.mt-s {
  margin-top: 1rem;
}
.mb-s {
  margin-bottom: 1rem;
}

.mt-d {
  margin-top: 1.25rem;
}
.mb-d {
  margin-bottom: 1.25rem;
}

.mt-b {
  margin-top: 1.5rem;
}
.mb-b {
  margin-bottom: 1.5rem;
}

.mt-eb {
  margin-top: 1.75rem;
}
.mb-eb {
  margin-bottom: 1.75rem;
}

.mt-h {
  margin-top: 2rem;
}
.mb-h {
  margin-bottom: 2rem;
}

.mt-eh {
  margin-top: 2.5rem;
}
.mb-eh {
  margin-bottom: 2.5rem;
}

@media (min-width: 1600px) {
  .mt-es {
    margin-top: 1rem;
  }
  .mb-es {
    margin-bottom: 1rem;
  }
  
  .mt-s {
    margin-top: 1.25rem;
  }
  .mb-s {
    margin-bottom: 1.25rem;
  }
  
  .mt-d {
    margin-top: 1.5rem;
  }
  .mb-d {
    margin-bottom: 1.5rem;
  }
  
  .mt-b {
    margin-top: 1.75rem;
  }
  .mb-b {
    margin-bottom: 1.75rem;
  }
  
  .mt-eb {
    margin-top: 2rem;
  }
  .mb-eb {
    margin-bottom: 2rem;
  }
  
  .mt-h {
    margin-top: 2.25rem;
  }
  .mb-h {
    margin-bottom: 2.25rem;
  }

  .mt-eh {
    margin-top: 3rem;
  }
  .mb-eh {
    margin-bottom: 3rem;
  }
}

@media (min-width: 2300px) {
  .mt-es {
    margin-top: 1.25rem;
  }
  .mb-es {
    margin-bottom: 1.25rem;
  }
  
  .mt-s {
    margin-top: 1.5rem;
  }
  .mb-s {
    margin-bottom: 1.5rem;
  }
  
  .mt-d {
    margin-top: 1.75rem;
  }
  .mb-d {
    margin-bottom: 1.75rem;
  }
  
  .mt-b {
    margin-top: 2rem;
  }
  .mb-b {
    margin-bottom: 2rem;
  }
  
  .mt-eb {
    margin-top: 2.25rem;
  }
  .mb-eb {
    margin-bottom: 2.25rem;
  }
  
  .mt-h {
    margin-top: 2.5rem;
  }
  .mb-h {
    margin-bottom: 2.5rem;
  }

  .mt-eh {
    margin-top: 3.5rem;
  }
  .mb-eh {
    margin-bottom: 3.5rem;
  }
}