.tui-quick-links-v2 {
  display: flex;
  flex-flow: wrap;

  @include breakpoint(lg) {
    flex-flow: nowrap;
  }

  .tui-quick-link {
    border-radius: $margin-normal;
    margin: $margin-half;
    flex: 1 calc(#{percentage(1 /2)} - #{$margin-normal});
    text-decoration: none;

    .icon-container,
    .text-container {
      display: flex;
      align-items: center;
      box-shadow: 1px 2px 5px rgba(0, 0, 0, .2);
    }

    .icon-container {
      flex: 1;
      justify-content: center;
      color: $color-white;
      border-radius: $margin-normal 0 0 $margin-normal;
      background-color: $color-blue-300;

      svg {
        width: 32px;
        height: 32px;
      }
    }

    .text-container {
      @include font-size(14);
      font-weight: 700;
      background-color: $color-white;
      color: $color-black;
      border-radius: 0 $margin-normal $margin-normal 0;
      flex: 3;
      padding: $margin-double $margin-normal;

      @include breakpoint(sm) {
        @include font-size(16);
        flex: 4;
      }

      @include breakpoint(lg) {
        flex: 2;
      }
    }

    @include breakpoint(xs) {
      &:nth-child(odd) {
        margin-left: 0;
      }

      &:nth-last-child(-n+2) {
        display: none;
      }
    }

    @include breakpoint(lg) {
      &:first-child {
        margin-left: 0;
      }

      &:last-child {
        margin-right: $margin-normal;
      }

      margin-left: $margin-half;
      margin-right: $margin-half;
    }
  }
}