.tui-quick-links {
  flex-flow: row wrap;
  align-content: stretch;
  margin: 0 -#{$margin-half};

  @include breakpoint(md) {
    margin: 0 -#{$margin-normal};
  }

  li {
    width: calc(50% - #{$margin-half});
    border-radius: $border-radius-normal;
    overflow: hidden;
    background-color: $color-white;
    margin: 0 3px $margin-half;
    box-shadow: 0 1px 0 0 rgba($color-black, .1);

    @include breakpoint(sm) {
      margin: 0 $margin-half $margin-normal;
      width: calc(33.33333% - #{$margin-normal});
    }

    @include breakpoint(md) {
      width: calc(20% - #{$margin-double});
      margin: 0 $margin-normal $margin-double;

      &:first-child:nth-last-child(1),
      &:first-child:nth-last-child(2),
      &:first-child:nth-last-child(2) ~ li,
      &:first-child:nth-last-child(3),
      &:first-child:nth-last-child(3) ~ li,
      &:first-child:nth-last-child(4),
      &:first-child:nth-last-child(4) ~ li {
        width: calc(25% - #{$margin-double});
      }
    }
  }

  a {
    flex-direction: column;
    background-color: $color-blue-300;
    color: $color-blue-450;

    &:hover,
    &:active {
      text-decoration: none;
    }
  }

  .pictogram {
    height: 84px;
    width: 84px;
    color: $color-white;
    margin: $margin-double auto;

    @include breakpoint(sm) {
      height: 96px;
      width: 96px;
      margin: $margin-triple auto;
    }

    @include breakpoint(lg) {
      margin: $margin-quadruple auto;
    }
  }
}

.tui-quick-link-text {
  margin-top: auto;
  background-color: $color-white;
  padding: $margin-enterprise;
  font-weight: bold;
}