landing_page/qdrant-landing/themes/qdrant/static/css/blocks/_article-card.scss

.article-card {
  display: flex;
  flex-direction: column;
  margin-bottom: 35px;
  position: relative;
  border-radius: 7px;
  background: var(--white);

  &_border {
    box-shadow: 0 0 0 1px var(--brand-mid-grey);
  }

  &_contrast {
    .article-card__text {
      color: var(--brand-secondary);
    }
  }

  &_content-style {
    .article-card__text {
      font-family: $font-family-content;
    }
  }

  &_small-btn {
    .article-card__btn {
      @include media-breakpoint-up(md) {
        font-size: 1.125rem;
        line-height: 1.625rem;
      }
    }
  }

  &__image {
    display: block;
    height: 145px;
    position: relative;
    border-radius: 7px 7px 0 0;
    overflow: hidden;

    img {
      min-width: 100%;
      min-height: 116px;
      position: relative;
      -moz-transition: all 600ms ease;
      -ms-transition: all 600ms ease;
      -o-transition: all 600ms ease;
      -webkit-transition: all 600ms ease;
      transition: all 600ms ease;
      border-radius: 7px 7px 0 0;
      object-fit: cover;
    }

    &:hover {
      img {
        transform: scale(1.05);
      }
    }
  }

  &__content {
    flex-grow: 1;
    padding: 23px 30px 0;
    position: relative;
    border-radius: 0 0 7px 7px;
  }

  &__title {
    min-height: 56px;
    margin-bottom: 6px;
    position: relative;
    color: var(--brand-secondary);
    font-size: 24px;
    font-weight: 700;
    line-height: 28px;

    a {
      position: relative;
      -moz-transition: all 300ms ease;
      -ms-transition: all 300ms ease;
      -o-transition: all 300ms ease;
      -webkit-transition: all 300ms ease;
      transition: all 300ms ease;
      color: var(--brand-secondary);

      &:hover {
        color: var(--brand-primary);
      }
    }
  }

  &__text {
    display: inline-block;
    margin-bottom: 13px;
    position: relative;
    color: var(--brand-dark-gray);
    font-size: 18px;
    line-height: 28px;
  }


  &:hover {
    .block-content {
      .learn-btn {
        color: #ffffff;
        background-color: var(--brand-primary);
      }
    }
  }

  &__btn {
    align-self: start;
    margin: 0 30px 23px;
    @include media-breakpoint-down(sm) {
      align-self: stretch;
      text-align: center;
    }
  }
}