/**
 * 1. Use this container to offset the spacing between wrapped cards.
 */
.kuiCardGroupContainer {
  margin: -$cardSpacing; /* 1 */
}

/**
 * 1. Wrap cards when necessary.
 */
.kuiCardGroup {
  display: flex;
  flex-wrap: wrap; /* 1 */

  /**
   * 1. Use the defined width of the card to determine when to wrap.
   * 2. Use an even margin all around the card so that the spacing is still even when wrapped.
   */
  .kuiCard {
    flex: 1 1 0; /* 1 */
    margin: $cardSpacing; /* 2 */

    .kuiCard__description {
      flex: 1 1 auto;
    }
  }
}

/**
 * 1. There's no way to make this look good when wrapped.
 */
.kuiCardGroup--united {
  flex-wrap: nowrap; /* 1 */
  border: 1px solid $cardBorderColor;
  border-radius: $globalBorderRadius;
  overflow: hidden;

  .kuiCard {
    border: none;
    border-radius: 0;
    margin: 0;
  }

  .kuiCard + .kuiCard {
    border-left: 1px solid $cardBorderColor;
  }
}
