.card-wrapper {
  border: 2px solid $brand-mediumblue;
  background-color: $brand-mediumblue;
  max-width: 100%;
  padding: 10px;

  margin: 1.1em;
  max-width: 300px;
  text-align: center;
  .card {
    color: $brand-white;
    h3 {
      text-align: center;
      margin-bottom: 0;
      color: $brand-white;
    }
    p {
      text-align: center;
      @include font-size(14);
      margin: 10px 5px;
    }
    .card-button {
      text-align: center;

    }

  }
  &.card-wrapper-plain {


    border-width: 1px;
    .card {
      margin: 7px;

    }
  }
  &.card-wrapper-image {

    padding: 0 0 10px 0;
  }
  &.hover-grow {
    transition: all 0.5s;
    &:hover {
       transform: scale(1.1);
       box-shadow: 1px 5px 14px rgba(0, 0, 0, 1);
   }
  }
}