@import "variables";

// Heroes

.hero {
  color: $white;
  background: $bg-red-fallback;
  background: $bg-red;

  h1, h2, h3, h4, h5, h6 {
    margin: 0;
    line-height: 1.3;
  }

  h1 {
    font-size: 3em;
  }

  h2 {
    font-size: 1.8em;
  }

  h3 {
    font-size: 1.6em;
  }

  h4 {
    font-size: 1.4em;
  }

  h5 {
    font-size: 1.2em;
  }

  h6 {
    font-size: 1em;
  }

  .section {
    padding: 5em 1.5em;
  }
}

@media screen and (max-width: $handheld) {
  .hero {
    .section {
      padding: 4em 1em;
    }

    h1 {
      font-size: 2.4em;
    }
  }
}