Blog Card

.blog__card {
  background-color: $white;
  border: $border-width-thin solid $gray-lighter;
  box-shadow: $card-drop-shaddow;
  grid-template-rows: auto 50px;
  height: 100%;
  margin: 0;

  @include mq($breakpoint-lg) {
    grid-template-rows: auto 65px;
  }

  &__header {
    margin-bottom: 35.5px;
    position: relative;

    &::after {
      content: '';
      display: block;
      height: 0;
      padding-bottom: 66.66%;
    }

    img {
      bottom: 0;
      height: 100%;
      left: 0;
      object-fit: cover;
      position: absolute;
      right: 0;
      top: 0;
      width: 100%;
    }
  }

  &__content {
    padding: $space-lg $space-lg 2rem;
  }

  &__category {
    align-items: center;
    background-color: $secondary;
    border: $border-width-thicker solid $white;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    margin-bottom: $space-md;
    margin-left: -$space-sm;
    height: 65px;
    width: 65px;

    a {
      cursor: pointer;
    }

    .icon {
      fill: $white;
      height: 35px;
      vertical-align: middle;
      width: 35px;

    }
  }

  &__type {
    bottom: $space-xs;
    color: $white;
    font-size: $font-size-xs;
    right: $space-xs;
    position: absolute;
    text-transform: uppercase;
  }

  &__title {
    margin-bottom: $space-md;

    a {
      color: $gray-dark;
      font-weight: $font-weight-normal;

      @include mq($breakpoint-lg) {
        font-size: 1.5rem;
      }
    }
  }

  &__author {
    color: $secondary;
    padding: 1rem 0;
  }

  &__with_image {
    grid-template-rows: 0fr auto 50px;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;

    @include mq($breakpoint-lg) {
      grid-template-rows: 0fr auto 65px;
    }

    .blog__card {

      &__category {
        left: $space-md;
        margin-left: 0;
        position: absolute;
        top: calc(100% - 35.5px);
      }

      &__content {
        -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
        -webkit-box-flex: 1;
        flex-grow: 1;
        padding: $space-xl $space-lg;
      }

      &__title {
        margin-bottom: 0;
      }
    }

    &_portrait {
      background-color: transparent;
      background-image: linear-gradient(222deg, transparent 30px, $white 30px);
      border: 0;
      box-shadow: none;
      filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
      grid-template-columns: 5fr 7fr;
      grid-template-rows: auto;
      height: 100%;
      margin: 0;

      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        border: $border-width-thin solid $gray-lighter;
        box-shadow: $card-drop-shaddow;
      }

      & > div {
        margin: 0;
      }

      .blog__card {

        &__image {
          position: relative;

          &::after {
            content: '';
            display: block;
            height: 0;
            padding-bottom: 130%;
          }

          img {
            bottom: 0;
            left: 0;
            height: 100%;
            object-fit: cover;
            position: absolute;
            right: 0;
            top: 0;
            width: 100%;
          }
        }

        &__content {
          flex-basis: calc(58.33333% - 4rem);
          grid-template-rows: auto $font-size-sm;
          padding: $space-md;

          @include mq($breakpoint-lg) {
            padding: $space-xl;
          }
        }

        &__body {
          flex-grow: 1;
        }

        &__footer {
          border-top: 0;
          line-height: 1;
          padding: 0;

          @include mq-only($breakpoint-mob) {
            grid-template-columns: 1fr;
          }
        }

        &__type {
          color: $gray-light;
          padding-bottom: $space-md;
          position: static;
        }

        &__topic {
          padding: 0;

          @include mq-only($breakpoint-mob) {
            display: none;
          }
        }

        &__category {
          margin-left: -6px;

          @include mq-only($breakpoint-mob) {
            height: 56px;
            margin-bottom: $space-xs;
            width: 56px;
          }

          .icon {
            @include mq-only($breakpoint-mob) {
              height: 30px;
              width: 30px;
            }
          }
        }

        &__author {
          @include mq-only($breakpoint-mob) {
            padding: $space-xs 0 $space-xl;
          }
        }

        &__title {
          font-size: $font-size-lg;
          line-height: 1;
          margin-bottom: 0;

          @include mq($breakpoint-lg) {
            font-size: 1.75rem;
          }
        }
      }
    }
  }

  &__description {
    color: $gray-light;
    line-height: $line-height;
    padding-bottom: $space-lg;

    a {
      color: $primary-light;
      font-weight: $font-weight-normal;
    }
  }

  &__footer {
    align-items: center;
    border-top: $border-width-thick solid $gray-lighter;
    grid-template-columns: 3fr 2fr;
    font-size: $font-size-sm;
    margin: 0;
    padding: $space-lg $space-md;
    width: 100%;
  }

  &__topic {
    padding: 0;
  }

  &__topic a {
    color: $secondary;
    cursor: pointer;
    padding: 0;
    white-space: nowrap;
  }

  &__date {
    color: $gray-light;
    padding: 0;
  }

  .icon--user {
    display: inline-block;
    padding-right: $space-sm;
    vertical-align: middle;
  }
}

@include mq-only($breakpoint-mob) {
  .col-6 {
    .blog__card__with_image {
      .blog__card {

        &__header {
          margin-bottom: 0;
        }

        &__content {
          padding: $space-lg $space-md;
        }

        &__category {
          height: 38px;
          top: calc(100% - 23px);
          width: 38px;

          .icon {
            height: 20px;
            width: 20px;
          }
        }

        &__title {
          font-size: 1.125rem;
          line-height: 1;
          margin-bottom: 0;
        }

        &__footer {
          grid-template-columns: 1fr;
          padding: $space-md $space-sm;
        }

        &__author,
        &__topic {
          display: none;
        }

        &__date {
          text-align: center;
        }
      }

      .link__read-more {
        display: none;
      }
    }
  }
}

@include mq-only($breakpoint-xs) {
  .col-6 {
    .blog__card__with_image {
      .blog__card {
        &__footer {
          padding: $space-md 0;
        }
      }
    }
  }
}