.asset_link {
  @include clearfix;
  @include rem(margin, 0 0 40px);

  &__icon {
    float: left;
    text-transform: uppercase;
    text-align: center;

    @include rem(margin-right, 20px);
    @include rem(width, 60px);

    .icon {
      @include rem(font-size, 58px);
    }

    img {
      @include rem(width, 40px);
      @include rem(margin, -5px 0);
    }
  }

  &__info {
    overflow: hidden;
  }

  &__title {
    color: $text;
    font-weight: $fw-semi;

    @include rem(font-size, 18px);
    @include rem(line-height, 30px);
    @include rem(margin-bottom, 2px);

    a {
      color: $text !important;

      &:hover {
        color: rgba($secondary, .6) !important;
      }
    }
  }

  &__desc {
    display: inline-block;
    vertical-align: top;
    color: rgba($secondary, .6);
    letter-spacing: 0;

    @include rem(font-size, 16px);
    @include rem(line-height, 24px);
  }

  &__link {
    letter-spacing: 0px;
    display: inline-block;
    vertical-align: top;

    @include rem(font-size, 16px);
    @include rem(line-height, 24px);
    @include rem(margin-left, 15px);
  }
  
  &__action {
    float: right;
  }

  &--alt {
    .asset_icon {
      @include rem(line-height, 32px);
      @include rem(height, 31px);
    }

    .asset_link__info {
      padding-top: 1px;
    }

    .asset_link__title,
    .asset_link__desc {
      display: inline-block;
      vertical-align: middle;
      margin-bottom: 0;
    }

    .asset_link__title {
      overflow: hidden;
      display: inline-block;
      white-space: nowrap;
      vertical-align: middle;
      text-overflow: ellipsis;

      @include rem(max-width, 200px);
    }

    .asset_link__desc {
      @include rem(margin-left, 8px);
    }
  }
}

.assets_list {
  list-style: none;
  padding: 0 !important;
  margin-bottom: 0 !important;
  width: 100%;
  font-size: 0 !important;

  a {
    text-decoration: none;
  }

  &__item {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    padding: 0 10px;
    width: 12.5%;
    font-size: 18px;

    img {
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 6px;
    }

    @media all and (max-width: 767px) {
      width: 20%;
    }

    @media all and (max-width: 540px) {
      width: 25%;
      padding: 0;
    }
  }
}

.asset_icon {
  background: $gray;
  border-radius: 3px;
  letter-spacing: 2px;
  font-weight: $fw-semi;
  color: #fff;
  text-align: center;
  cursor: default;

  @include rem(width, 60px);
  @include rem(height, 60px);
  @include rem(font-size, 16px);
  @include rem(line-height, 60px);

  @include color-modifier(background);
}

.asset_link_list {
  @include rem(margin, 0 0 40px);

  .asset_link {
    margin: 0;
    border-bottom: 1px solid #EBEDEF;

    @include rem(padding, 20px 0);

    &:first-child {
      border-top: 1px solid #EBEDEF;
    }
    
    &__action {
      float: right;
    }
  }

  &:empty {
    display: none;
  }
}

.whatever_list {
  @include rem(margin, 40px 0);

  &__item {
    margin: 0;
    border-bottom: 1px solid #EBEDEF;

    @include rem(padding, 20px 0);
  }

  &__action {
    float: right;
  }

  &:empty {
    display: none;
  }
}