.terms {
  @include flexbox();
  @include align-items(center);
  @include flex-direction(column);
  width: 100%;
  
  &__title {
    margin: 2rem 0;
    font-family: $title-font;
    
    @include themify($themes) {
      color: themed('terms-title-color');
      text-shadow: 1.2px 1.2px 0 themed('terms-title-color'),
        2.4px 2.4px 0 lighten(themed('terms-title-shadow-color'), 4%),
        3.6px 3.6px 0 lighten(themed('terms-title-shadow-color'), 8%),
        4.8px 4.8px 0 lighten(themed('terms-title-shadow-color'), 12%);
    }    
  }

  &__content {
    width: 100%;
  }

  &__list {
    width: 50%;

    @include flexbox();
    @include align-items(center);
    @include flex-wrap(wrap);
    
    @media only screen and (max-width: 769px) {
      width: 100%;
      padding: 2rem 1rem;
    }
  }

  &__item {
    display: inline-block;
    margin-right: 1rem;  
    text-decoration: none !important;
    border-radius: 0.25rem;
    padding: 0.25rem;

    @include transition(all, 0.2s, ease);
    @include on-event {
      @include translateY(-0.25rem);
    }
  }

  &__link {
    &:hover {
      text-decoration: none;
    }
  }

  &__tags {
    @include themify($themes) {
      color: themed('terms-tags-color');
    }
  }

  &__categories {
    @include themify($themes) {
      color: themed('terms-categories-color');
    }    
  }

  &__series {
    @include themify($themes) {
      color: themed('terms-series-color');
    }
  }

  &__len {
    @include themify($themes) {
      color: themed('terms-len-color');
    }
  }

  .is-small {
    font-size: 1rem;
  }

  .is-normal {
    font-size: 1.5rem;
  }

  .is-medium {
    font-size: 2rem;
  }

  .is-large {
    font-size: 2.5rem;
  }
}