.about-wrapper {
  margin-right: 1.5em;
  margin-left: 1.5em;

  p, li {
    color: $lighter-base-font-color;
    font: normal 14px/20px $sans-serif;
  }

  a {
    color: $pink;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  h1 {
    color: $base-font-color;
    text-transform: uppercase;
  }

  h2 {
    color: $base-font-color;
    font: normal 18px/22px $sans-serif;
    margin-bottom: 15px;
    margin-top: 1.5em;
    text-transform: uppercase;
  }

  .our-story {
    margin-right: 3em;
  }

  .our-story,
  .contact {
    max-width: 27em;
  }

  .start-a-chapter {
    margin-top: calc(2em + 12px);
  }
}

.start-a-chapter-wrapper {
  section {
    margin-top: 0;
    padding-top:0;
    margin-bottom: 1.5em;

    &.intro, &.steps {
      max-width: 50em;
      margin: 0 auto 1.5em;
    }
  }

  .photo-strip {
    .photo-wrapper {
      max-width: 33%;
    }
    img {
      width: 100%;
    }
  }

  .steps-list {
    margin-top: 2em;
  }

  ol {
    list-style: none;
    counter-reset: stepCounter;
  }

  li {
    margin-bottom: 2em;
  }

  .step-icon {
    margin-right: 2em;

    img {
      max-width: 75px;
    }
  }

  .step-text {
    max-width: calc(100% - 75px - 2em);
    counter-increment: stepCounter;

    strong {
      text-transform: uppercase;
      display: block;
      margin-bottom: .75em;

      &:before {
        content: counter(stepCounter) ". ";
      }
    }
  }
}

/**********************************************/
/*               Responsiveness               */
/**********************************************/

@media (max-width:$maximum-width) {
  .about-wrapper {
    .our-story {
      margin-right: 0em;
    }

    .our-story,
    .contact {
      max-width: 100%;
    }

    .contact {
      margin-top: 2em;
    }
  }
}

@media (max-width:$mobile-standard) {
  .start-a-chapter-wrapper {
    .step-text {
      max-width: 100%;
    }

    .photo-strip {
      .photo-wrapper {
        max-width: 100%;
      }
    }
  }
}
