/**
 * 1. Wrap cards when necessary.
 * 2. Offset the spacing between wrapped cards.
 */
.kuiCardGroup {
  display: flex;
  flex-wrap: wrap; /* 1 */
  margin: -$cardSpacing; /* 2 */

  /**
   * 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 auto; /* 1 */
    margin: $cardSpacing; /* 2 */

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

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

  /**
   * 1. Force all cards to be the same size.
   * 2. Undo the default styles.
   */
  .kuiCard {
    flex-basis: 0; /* 1 */
    border: none; /* 2 */
    border-radius: 0; /* 2 */
    margin: 0; /* 2 */
  }

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