/* @content-card */
.content-card {
  position: relative;
  background-color: white;
  border: 1px solid #cdecf4;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 250px;

  @include themify($themes) {
    border: 1px solid themed('borderColor');
  }

  .content-cards--three-columns-on-desktop & {
    flex-basis: 25%;
  }

  .content-cards--two-columns-on-desktop & {
    flex-basis: 40%;
  }

  &--singular,
  &.LG {
    flex: 1;
    border-left: none;
    border-right: none;
    
    flex-wrap: wrap;

    @media (min-width: $large-screen) {
      flex-direction: row;
    }

    .content-card__image {
      // flex: 1;
      min-width: 250px;
      height: 200px;
      margin-bottom: -1px;

      &.thumbnail-image {
        padding: 2em;

        .content-card__thumbnail {
          height: 100%;
          width: auto;
          margin: 0 auto;
        }
      }


      @media (min-width: $large-screen) {
        flex-direction: row;
        height: auto;
        margin-top: -1px;
      }
    }



    .content-card__content {
      margin-bottom: 0;
      flex: 1;
      min-width: 250px;
      display: flex;
    }

    &.LG {
      flex-direction: row;

      .content-card__image {
        min-height: 250px;
        flex: 1;
        height: auto;
      }

      .content-card__content {
        border-left: 1px solid #cdecf4;
        border-right: 1px solid #cdecf4;

        @include themify($themes) {
          border-left: 1px solid themed('borderColor');
          border-right: 1px solid themed('borderColor');
        }
      }
    }

    &.LG.thumbnail-border {
      .content-card__image {
        @include themify($themes) {
          border-left: 1px solid themed('borderColor');
          border-top: 1px solid themed('borderColor');
          border-bottom: 1px solid themed('borderColor');
        }
      }

      .content-card__content {
        border-left: none !important;
      }
    }

    .content-card__padder {
      @include poly-padding--large;
      @include poly-margin--small;
    }
  }

  margin: 1em;

  &__image {
    background-color: white;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 200px;
    flex-basis: 200px;
    text-align: center;

    img {
      margin: 0 auto;
    }
  }

  &__pre-heading {
    margin-bottom: 1rem;
    display: block;
  }

  &__content {
    margin-bottom: auto;

    .heading {
      margin-bottom: $small-spacing;
      margin-top: 1em;
      @media (min-width: $medium-screen) {
        margin-top: iniital;
        // margin-top: 3em;
      }
    }

    p {
      font-size: 14px;
    }
  }

  &__padder {
    @include poly-padding-y--large;
    @include poly-padding-x;
    width: 100%;
  }

  &.thumbnail-border {
    padding-top: 2rem;
  }
}