.card {
  background-color: $base-white;
  box-shadow: $base-elevation-card;
  margin-bottom: $base-spacing-1-half;
  width: 100%; // fixed card header text breaking on mobile

  &.basic {
    display: flex;
    flex-direction: column;

    img {
      height: 194px;
      width: 100%;
      object-fit: cover;
    }

    .card-logo {
      height: 194px;
      background: linear-gradient(225deg, $base-white, $gallery-100);
      box-sizing: border-box;
      padding: $base-spacing-2x;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        max-height: 80px;
      }
    }

    .card-header {
      color: $sky-blue-500;

      h2 {
        padding: $base-spacing-2x;
      }

      h3 {
        padding: $base-spacing-2x;
      }

      @media only screen and (min-width: map-get($base-breakpoints, 'md')) {
        // to display ellipsis on multiline using pure CSS instead of having JavaScript
        // https://hackingui.com/a-pure-css-solution-for-multiline-text-truncation/
        h2 {
          position: relative;
          max-height: 106px;
          -webkit-hyphens: auto;
          -moz-hyphens: auto;
          -ms-hyphens: auto;
          hyphens: auto;
          overflow: hidden;
          padding: $base-spacing-2x;
          margin-bottom: $base-spacing-2x;

          &:before {
            content: '...';
            position: absolute;
            right: 0;
            bottom: 0;
            background-color: $base-white;
            width: $base-spacing-1-half;
          }

          &:after {
            content: '';
            position: absolute;
            right: 0;
            width: $base-spacing-1-half;
            height: 100%;
            margin-top: 0.2em;
            background: $base-white;
          }
        }
        h3 {
          position: relative;
          max-height: 108px;
          -webkit-hyphens: auto;
          -moz-hyphens: auto;
          -ms-hyphens: auto;
          hyphens: auto;
          overflow: hidden;
          padding: $base-spacing-2x;
          padding-bottom: 0;
          margin-bottom: $base-spacing-2x;

          &:before {
            content: '...';
            position: absolute;
            right: 0;
            bottom: 0;
            background-color: $base-white;
            width: $base-spacing-1-half;
          }

          &:after {
            content: '';
            position: absolute;
            right: 0;
            width: $base-spacing-1-half;
            height: 100%;
            margin-top: 0.2em;
            background: $base-white;
          }
        }
      }
    }

    .card-body {
      padding-left: $base-spacing-2x;
      padding-right: $base-spacing-2x;
      flex-grow: 1;

      p {
        margin: 0;
      }
    }

    .card-footer {
      display: flex;
      justify-content: flex-end;
      padding: $base-spacing-2x;
    }
  }

  &.basic.only-image {
    .card-footer {
      padding-top: $base-spacing-1-half;
      padding-bottom: $base-spacing-1-half;
    }
  }

  &.informative {
    display: flex;
    flex-direction: column;
    background-color: $baltic-sea-600;
    padding: $base-spacing-3-4th;
    padding-bottom: $base-spacing-1-half;
    color: $base-white;
    box-shadow: $base-elevation-card-dark; // dark informative card
    box-sizing: border-box; // fix padding and width 100% pushing the content outside of parent width

    img {
      height: 154px;
      width: 100%;
      object-fit: cover;
      margin-bottom: $base-spacing-3-4th;
    }

    .card-bar {
      height: 8px;
      background-color: $sky-blue-500;
      margin-bottom: $base-spacing-1-half;
    }

    .card-header {
      margin-bottom: $base-spacing;
    }

    .card-body {
      p {
        margin: 0;
      }
    }
  }

  &.informative.only-image {
    padding-bottom: $base-spacing;
  }
}