.icon {
  margin: 0 auto;
  margin-top: @grid-gutter-width;
  background-image: url("@{img_dir}/icons.svg");
  background-repeat: no-repeat;

  & ~ * { text-align: center; }

  &-twitter,
  &-couchdb,
  &-github,
  &-travis,
  &-leveldb,
  &-saucelabs {
    opacity: .75;
    &:hover { opacity: 1; }
  }

  &-node {
    background-position: 0;
    width: 68px;
    height: 73px;
  }

  &-light  {
    background-position: -73px -1px;
    width: 92px;
    height: 85px;
  }

  &-learn {
    background-position: -170px 0;
    width: 92px;
    height: 87px;
  }
  &-open {
    background-position: -267px -5px;
    width: 111px;
    height: 77px;
  }
  &-twitter {
    background-position: -388px -24px;
    width: 46px;
    height: 39px;
  }
  &-couchdb {
    background-position: -439px -15px;
    width: 90px;
    height: 57px;
  }
  &-github {
    background-position: -537px -22px;
    width: 45px;
    height: 43px;
  }
  &-travis {
    background-position: -589px -20px;
    width: 45px;
    height: 43px;
  }
  &-leveldb {
    background-position: -640px -20px;
    width: 40px;
    height: 43px;
  }
  &-saucelabs {
    background-position: -686px -22px;
    width: 45px;
    height: 43px;
  }

  @media (max-width: @screen-sm-min) {
    &-node,
    &-light,
    &-learn,
    &-open {
     height: 70px;
     width: 67px;
     background-size: 500px;
     + * { margin-top: 0; }
    }
    &-node {
      height: 60px;
      width: 50px;
      background-position: 0 0;
    }
    &-light { background-position: -50px 0; }
    &-learn { background-position: -117px 0; }
    &-open {
      background-position: -181px 0;
      width: 85px;
    }
  }
}
