.tui-tag-link {
  display: inline-block;
  width: 100%;
  background: $color-blue-100;
  padding: $margin-normal;
  margin: 0 $margin-double $margin-double 0;
  border-radius: $border-radius-normal;
  font-weight: bold;

  &:hover,
  &:active {
    background: $color-blue-200;
    text-decoration: none;
  }

  @include breakpoint(sm) {
    width: auto;
    padding: $margin-normal $margin-double;
  }
}

.tui-tag-links-column {
  @extend %flexbox-row;
  flex-wrap: wrap;
  margin: -$margin-quarter;

  .tui-tag-link {
    width: calc(50% - #{$margin-half});
    margin: $margin-quarter;

    @include breakpoint(sm) {
      width: auto;
    }
  }

  &.alternative-1 {
    .tui-tag-link {
      background: $color-beige-100;
      color: $color-blue-450;

      &:hover,
      &:active {
        background: darken($color-beige-100, 15%);
        text-decoration: none;
      }
    }
  }
}