/*
  Device tiers (industry standard)
  - Phone:   < 640px
  - Tablet:  640px - 1023px
  - Desktop: 1024px - 1439px
  - XL:      >= 1440px
*/

@media (max-width: 639px) {
  .website-main {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .website-hero h1 {
    font-size: 2.4rem !important;
    line-height: 1;
  }

  .website-hero .tagline {
    margin-bottom: 1.75rem !important;
  }

  .website-footer {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .website-main {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  .website-hero h1 {
    font-size: 3.4rem !important;
  }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  .website-hero h1 {
    font-size: 4rem !important;
  }
}

@media (min-width: 1440px) {
  .website-main {
    max-width: 96rem;
    margin: 0 auto;
    width: 100%;
  }

  .website-hero h1 {
    font-size: 4.8rem !important;
  }

  .website-hero .tagline {
    font-size: 0.9rem !important;
    letter-spacing: 0.12em;
  }
}