.home {
  .container {
    padding: 0;
    h1 {  // tagline
      font-size: 35px;
      line-height: 1.3;
      font-weight: 400;
      margin: 2rem 0 0;
      @media screen and (max-width: $md) {
        font-size: 24px;
        margin: 1rem 0;
        padding: 0;
      }
    }
  }
}


section.featured-action {
  .container {
    margin: 1rem 0 1rem;
    padding: 0;
    @media screen and (min-width: $md) {
      margin: 3rem auto 7rem;
    }
    .row {
      @include flex-this;
      div {
        @include flex-item;
        text-align: left;
      }
      h2 {
        padding-top: 0;
        @media screen and  (min-width: $lg) {
          margin-bottom: 1rem;
          margin-top: -0.5rem;
        }
      }
      div:first-child { // featured image
        padding: 0;
        width: 100%;
        @media screen and  (min-width: $md) {
          padding: 5px 2.8rem 0 0;
          width: 66%;
        }
        @media screen and  (min-width: $ph) {
          margin-top: 0;
        }
      }
      span.eff-button {
        display: block;
        margin: 1rem auto 0;
        text-align: center;
        width: 250px;
        @media screen and  (min-width: $md) {
          width: 100%;
        }
        @media screen and  (min-width: $lg) {
          margin: 1.5rem 0 0;
          width: 250px;
        }
      }
      div:last-child { // featured text
        margin-bottom: 4rem;
        width: 100%;
        @media screen and  (min-width: $md) {
          margin: 0;
          width: 33.5%;
        }
        h5 { // category
          padding-bottom: 0;
          padding-top: 1rem;
          @media screen and  (min-width: $md) {
            padding: 0;
          }
        }
      }
    }
  }
}

section.more-actions {
  margin: 0;
  padding: 0;
  .row {
    @include flex-this;
    > div {
      @include flex-item;
      margin-top: 0;
      padding: 0;
      width: 33%;
      @media screen and (min-width: $ph) {
        width: 100%;
      }
      @media screen and (min-width: $md) {
        padding: 0 2rem 0 0;
      }
      a {
        border: none;
      }
      a:hover {
        color: $off-white;
      }
      &:hover {
        opacity: 0.7;
      }
    }
    h3 {
      cursor: pointer;
      font-size: $base-font-size * 1.2;
      padding: 0.5rem 0 0.3rem;
    }
  }

  .more-actions-image {
    overflow: hidden;
    position: relative;
    img {
      max-width: 100%;
    }
  }

  .see-all {
    display: inline-block;
    margin: 1rem auto 3rem;
    text-align: center;
    text-transform: uppercase;
    width: inherit;
    @media screen and (min-width: $md) {
      margin: 5rem auto;
    }
  }
}
