/*
  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: 2rem !important;
    line-height: 1.15;
  }

  .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: 3rem !important;
    line-height: 1.1;
  }
}

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

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

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

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