@import '../../helpers/base.scss';

.support {
  height: 50px;
  margin-bottom: 20px;

  svg {
    margin-top: -3px;
  }
}

.container {
  display: block;
  padding: 50px 0 25px;

  h1 {
    @extend %h1;
    margin-bottom: $double * 3;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K");
    background-repeat: no-repeat;
    background-size: 45px 40px;
    padding-left: 50px;
    span {
      display: inline-block;
    }
    span:first-child {
      margin-right: 10px;
      color: #61dafb;
    }
    @media all and (max-width: 1125px) {
      font-size: 30px;
    }
    @media all and (max-width: 1024px) {
      font-size: 28px;
    }
    @media all and (max-width: 535px) {
      font-size: 26px;
    }
    @media all and (max-width: 460px) {
      font-size: 46px;
      span:nth-child(2) {
        display: none;
      }
    }
  }
  h2 {
    @extend %h2;
    margin-bottom: $unit;
    strong {
      display: inline-block;
      margin-bottom: $double;
      margin-right: $double;
    }
    span {
      display: inline-block;
      font-size: $double * 2;
      font-weight: 500;
    }
  }
  p {
    @extend %text;
    margin-bottom: 30px;
  }
}