.card-center {
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-shadow: $box-shadow-card;
  border-radius: $margin-normal;
  transition: all .1s ease-in-out;
  width: 100%;
  color: inherit;
  overflow: hidden;

  margin-right: $margin-half;
  margin-bottom: $margin-half;

  &:last-child {
    margin-right: 0;
    margin-bottom: 0;
  }

  &:link,
  &:visited {
    text-decoration: none;
    color: inherit;
    outline: 0;
  }

  &:hover {
    box-shadow: $box-shadow-card-hover;
    transform: scale($scale-card-hover);
  }

  &:active {
    transform: scale($scale-card-active);
  }

  @include breakpoint(sm) {
    width: auto;
    margin-right: $margin-normal;
    margin-bottom: 0;
  }

  .text-block,
  .button-block {
    width: 100%;
    padding: $margin-normal;
    position: relative;
  }

  .text-block {
    flex: 1;
    flex-direction: column;
  }

  .media-container {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    width: 100%;
    border-radius: $margin-normal $margin-normal 0 0;

    .ratio-16-9,
    img {
      border-radius: $margin-normal $margin-normal 0 0;
    }
  }
}