@import '../../sass/flexbox-grid-mixins';

$default-grid-gap: 2rem 1rem;

.cards {
  @include grid($flex-wrap: wrap, $gap: $default-grid-gap);
}

.card {
  @include grid-col($col: 4, $gap: $default-grid-gap);
  border: solid 3px #ddd;
  padding: 1rem;
}

button {
  width: 100%;
  padding: .8rem;
  background: #ec9f10;
  border: solid 1px #ddd;
}

.cards.with-button {
  .card {
    @include grid($flex-direction: column);
  }
}

.column {
  @include grid-col($flex-grow: 1, $flex-shrink: 1, $flex-basis: 0);
}