/*------------------------------------*\
  $SIDEBAR
\*------------------------------------*/

/**
 * Download sidebar items
 */
.download {
  @include span(4 of 8);

  &:nth-of-type(2n) {
    @include last;
  }

  @include mq(mq768) {
    &,
    &:nth-of-type(2n) {
      @include span(5 of 15);
    }

    &:nth-of-type(3n) {
      @include last;
    }
  }

  &:last-of-type {
    @include last;
  }

  a {
    text-decoration: none !important;
  }

  &__title {
    font: {
      size: font-size(16);
      weight: 700;
      family: $body-font;
    }
    text: {
      transform: uppercase;
      decoration: none !important;
    }
    color: $brand;
    margin: 0 20px;
    transition: color 0.3s;
  }

  &__desc {
    font-size: font-size(15);
    margin: 0;
  }

  &:before {
    content: '';
    background: {
      image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.7 18.7"><path d="M8.86,0h1L9.92,0c0.41,0.05.83,0.08,1.24,0.15a8.27,8.27,0,0,1,2.62.92,9.81,9.81,0,0,1,3.07,2.67A8.78,8.78,0,0,1,18.67,8.6c0,0.09,0,.19,0,0.28V9.82a0.7,0.7,0,0,0,0,.08c0,0.38-.07.77-0.13,1.15a8.34,8.34,0,0,1-.86,2.58A9.76,9.76,0,0,1,15,16.8a8.78,8.78,0,0,1-4.9,1.86l-0.28,0H8.88l-0.28,0a9.09,9.09,0,0,1-2-.35,8.72,8.72,0,0,1-3-1.59A9.69,9.69,0,0,1,.9,13.4,8.86,8.86,0,0,1,0,10.13c0-.1,0-0.2,0-0.29v-1a0.88,0.88,0,0,0,0-.09c0-.36.06-0.71,0.12-1.07A8.33,8.33,0,0,1,1.05,5,9.69,9.69,0,0,1,5.34.88,8.65,8.65,0,0,1,8.58,0ZM2,9.35A7.32,7.32,0,1,0,9.35,2,7.34,7.34,0,0,0,2,9.35Z" fill="#bd2b2e"/><path d="M7.53,6.1v4.17H5.25l4.11,3.85,4.09-3.84v0H11.17V6.1H7.53Z" fill="#fff"/><path d="M7.53,6.1h3.64v4.16h2.27v0L9.36,14.12,5.25,10.27H7.53V6.1Z" fill="#bd2b2e"/></svg>');
      size: 30px 30px;
      repeat: no-repeat;
    }
    display: block;
    width: 30px;
    height: 30px;
    margin: {
      right: auto;
      bottom: 15px;
      left: auto;
    }
  }

  &:after {
    content: '';
    display: block;
    width: 10px;
    height: 1px;
    background: $brand;
    margin: 15px auto 20px;
    transition: all 0.3s;
  }

  @include states {
    &:after {
      width: 85px;
    }
  }

}