.card {
  background: $white;
  color: $base-font-color;
  margin: 0 $base-spacing / 2;

  @include media($tablet) {
    display: table;
  }

  .card__column {
    padding: $base-spacing;

    @include media($tablet) {
      @include span(6 of 12);
      float: none;
      display: table-cell;
      vertical-align: top;
      padding: $base-spacing;
    }

    + .card__column {
      border-top: 2px solid $light-gray;
      padding: 0px;

      @include media($tablet) {
        border-left: 2px solid $light-gray;
        border-top: 0;
      }
    }

    .card__copy {
      padding: $base-spacing;
    }
  }

  .caption {
    font-family: $font-handwritten;
    font-weight: $weight-normal;
    padding-top: $base-spacing;
    font-size: $font-medium;
  }
}


// @TODO: currently using this temporary class
// but will be aiming to consolidate all "card"
// styles together, so that card becomes more of
// a styled container.
.beta-card {
  border-radius: 4px;
  color: $dark-gray;
  overflow: hidden;
  background-color: $white;

  .beta-card__header,
  .beta-card__body {
    .heading {
      color: $dark-gray;
    }
  }

  .tagline {
    font-size: $font-small;
    color: $dark-gray;
    font-style: italic;
    height: 60px; // Keeps cards at the same height
  }

  .form-actions {
    padding-top: gutter();
    margin-bottom: $base-spacing;
  }

  &.-headerless {
    .beta-card__row:first-of-type {
      margin-top: 0;
    }
  }
}

.beta-card__row {
  margin: gutter() 0;
}

.beta-card__block {
  padding: 0 $base-spacing / 2;

  @include media($large) {
    padding: 0 $base-spacing;
  }

  .beta-card__header & {
    padding: gutter() gutter() 0;
  }

  &.-centered {
    text-align: center;
    margin: 0 auto;

    @include media($large) {
      max-width: 75%;
    }
  }

  &.-flushed {
    padding: 0;
  }
}

.container__cards {
  text-align: center;
}
