About.scss

@import "variables.scss";

.About {
  background-repeat: no-repeat;
  background-size: 110%;
  margin-bottom: calc(#{$padding}*2) !important;
  @include desktop() {
    padding-top: calc(#{$padding} * 4) !important;
    background-size: 165%;
  }
  @include xl() {
    background-size: 100%;
  }

  .margin {
    @include desktop() {
      margin-top: calc(#{$padding} * 4) !important;
    }
  }

  h1 { color: $teal; font-size: 24px; line-height: 32px; padding: calc(#{$padding}*3) calc(#{$padding}*3) 0 calc(#{$padding}*3);
    @include desktop() { font-size: 30px; line-height: 40px; max-width: 515px; margin: auto;}
  }
  h2 {
    color: $primaryText;
    font-size: 24px;
    line-height: 30px;
    font-weight: 400;
    @include desktop() {
      max-width: 515px;
      margin: auto;
    }
  }
  h3 {
    font-size: 18px;
    line-height: 26px;
    font-family: $sans;
    color: $secondaryText;
    padding: calc(#{$padding} * 2);
    @include desktop() {
      max-width: 515px;
      margin: auto;
    }
  }
  p {
    color: $lightGrayText;
    padding-top: $padding;
  }

  .icons { display: flex; flex-direction: row; flex-wrap: wrap;
    div { width: 50%; padding: $padding;
      @include desktop() { width: 25% }
    }
    img { display: block; margin: 10px auto; width: 53px; }
    }

  .signup { padding: 40px 20px; }
}

.Rating {
  margin-top: calc(#{$padding} * 5);

  p {
    font-family: $serif;
    font-size: 20px;
  }
  ul {
    padding: calc(#{$padding} * 3) 0 0 calc(#{$padding} *2);
    font-size: 14px;
    margin: 0;
  }
  li {
    list-style-position: inside;
    text-indent: -22px;
    padding-bottom: $padding;
    color: $secondaryText;
    text-align: left;
  }
  @include desktop() {
    .good-container {
      display: flex;
    }
    .margin-fix {
      border-right: none;
    }
  }
}

.GoodFor {
  margin: calc(#{$padding}*4) 0;

  h2 {
    font-weight: 700;
    font-size: 22px;
    margin-top: $padding;
  }
  p {
    font-family: $sans;
    font-size: 15px;
    line-height: 22px;
    margin-top: $padding;
    @include desktop() {
      text-align: left;
    }
  }
  img {
    width: 64px !important;
    margin-bottom: 0 !important;
  }
  .pink { color: $darkPink; fill: $darkPink; }
  .green { color: $teal; fill: $teal; }

  @include desktop() {
    border: 1px solid $borderColor;
    width: 50%;
    padding: calc(#{$padding}*4);
  }
}

.Example {
  p {
    margin: $padding;
    color: #959595;
    font-size: 15px;
    line-height: 24px;
  }
  img {
    width: 100%;
    @include desktop() {
      margin-top: calc(#{$padding} *2);
    }
  }
  .heading {
    font-family: $serif;

  }
  .content-container {
    display: flex;
    align-items: center;
    flex-direction: column;

    @include desktop() {
      flex-direction: row;
      align-items: flex-start;
    }
  }
  .content {
    @include desktop() {
      text-align: left;
      width: 50%;
      margin: calc(#{$padding} * 2);
    }
    .nsf {
      width: 75px;

    }
  }
}

.Why {
  background-position: 50% 0%;
  background-size: 350%;
  background-repeat: no-repeat;
  padding: calc(#{$padding} * 3);

  @include desktop() {
    background-size: cover;
    padding-bottom: calc(#{$padding} * 8);
    margin-bottom: calc(#{$padding} * 4);
  }

  h1 {
    font-weight: 400;
    color: $primaryText;
    font-size: 26px;
    padding-bottom: 0px;
  }
  h3 {
    font-weight: 400;
    font-family: $serif;
    padding-top: 10px;
    padding-bottom: 40px;
  }
  p {
    font-size: 16px;
    background-color: white;
    padding: calc(#{$padding} * 2);
    line-height: 24px;
    @include desktop() {
      max-width: 715px;
      margin: 0 auto;
      padding: calc(#{$padding} * 3) calc(#{$padding} * 6);
    }
  }
}

.Categories {
  padding: 0 calc(#{$padding} * 2);

  h1 {
    font-weight: 400;
    color: $primaryText;
    font-size: 26px;
    padding: 0 calc(#{$padding} * 2);
  }
  @include desktop() {
    max-width: 750px;
    margin: 0 auto;
  }
  .grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: calc(#{$padding} * 3);

    div {
      position: relative;
      width: 50%;
      padding: 5px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    p {
      font-family: $serif;
      color: $secondaryText;
      position: absolute;
      top: $padding;
      width: 100%;
    }
  }
}