#page {
  main {
    margin: $border-size-xlarge auto;
    max-width: $large-tablet;

    .crumbtrail {
      text-transform: uppercase;
      color: $color-gray;

      a {
        color: $color-gray;
      }
    }

    .h-entry header,
    header {
      margin-bottom: $border-size-large;

      h1 {
        font: {
          weight: bold;
          weight: 800;
          size: 3rem;
        }
        line-height: 1.25em;
      }

      h2 {
        font: {
          weight: normal;
          weight: 300;
          size: 2rem;
        }
        line-height: 1.25em;
      }
    }

    .meta {
      img {
        // TODO refactor away
        width: 100% !important;
        height: auto !important;
      }
    }

    .e-content {
      h1 {
        font: {
          weight: bold;
          weight: 700;
          size: 4rem;
        }

        line-height: 1.25em;
        margin-bottom: $border-size-small;
      }

      h2 {
        font: {
          weight: normal;
          weight: 500;
          size: 3rem;
        }

        line-height: 1.25em;
        margin-bottom: $border-size-small;
      }

      h3 {
        font: {
          weight: lighter;
          weight: 300;
          size: 2.5rem;
        }

        line-height: 1.25em;
        margin-bottom: $border-size-medium;
        border-bottom: $border-size-xsmall solid $color-gray-light;

        &:first-child {
          border: none;
        }
      }

      audio {
        width: 100%;
      }

      video {
        width: 100%;
        margin-bottom: $border-size-large;
      }

      .buttons {
        margin-bottom: $border-size-xlarge;

        .button {
          margin: 0 $border-size-small $border-size-medium 0;
        }
      }

      li,
      p {
        font-size: 1.75rem;
        line-height: 1.5em;
        text-rendering: optimizeLegibility;
      }

      p {
        margin-bottom: $border-size-large;
      }
    }

    li {
      text-rendering: optimizeLegibility;
      margin-bottom: $border-size-large;
    }

    ul,
    ol {
      margin-bottom: 1em;
    }

    li ul,
    li ol {
      margin-top: .5em;
    }

    ol {
      list-style-type: square;
    }

    ul {
      list-style-type: square;
    }

    dd,
    dt,
    li {
      line-height: 1em;
    }

    li {
      margin: 0 0 .5em 0;
    }

    li li {
      margin: 0 0 0 1.5em;
      line-height: 1.5em;
    }

    @media screen and (min-width: $small-tablet) {
      .intro p {
        font-size: 2.25rem;
        line-height: 1.5em;
      }

      header {
        h1 {
          font-size: 4rem;
        }

        h2 {
          font-size: 3rem;
        }
      }
    }

  }
}
