.block-article-card {
  align-items: flex-start;
  justify-content: flex-start;
  height: 100%;
  color: #4e4030;
}

.block-article-card__cover {
  width: 100%;
}

.block-article-card__image-wrapper {
  position: relative;
  display: block;
  width: 100%;
  padding: var(--padding);
  overflow: hidden;
  background-color: rgb(243 243 243 / 100%);
  border-radius: var(--border-radius);
}

.block-article-card__image-wrapper--fixed-ratio {
  aspect-ratio: var(--aspect-ratio);
}

.block-article-card__image-wrapper--fixed-ratio picture,
.block-article-card__image-wrapper--fixed-ratio .block-article-card__image,
.block-article-card__image-wrapper--fixed-ratio img,
.block-article-card__image-wrapper--fixed-ratio svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  border-radius: 10px;
}

.block-article-card__image-wrapper:not(
    .block-article-card__image-wrapper--fixed-ratio
  )
  picture,
.block-article-card__image-wrapper:not(
    .block-article-card__image-wrapper--fixed-ratio
  )
  .block-article-card__image,
.block-article-card__image-wrapper:not(
    .block-article-card__image-wrapper--fixed-ratio
  )
  img,
.block-article-card__image-wrapper:not(
    .block-article-card__image-wrapper--fixed-ratio
  )
  svg {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.block-article-card__image-wrapper picture,
.block-article-card__image-wrapper .block-article-card__image,
.block-article-card__image-wrapper img,
.block-article-card__image-wrapper svg {
  transition: transform 0.4s ease;
}

.block-article-card:hover .block-article-card__image-wrapper picture,
.block-article-card:hover .block-article-card__image-wrapper .block-article-card__image,
.block-article-card:hover .block-article-card__image-wrapper img,
.block-article-card:hover .block-article-card__image-wrapper svg {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .block-article-card__image-wrapper picture,
  .block-article-card__image-wrapper .block-article-card__image,
  .block-article-card__image-wrapper img,
  .block-article-card__image-wrapper svg {
    transition: none;
  }

  .block-article-card:hover .block-article-card__image-wrapper picture,
  .block-article-card:hover .block-article-card__image-wrapper .block-article-card__image,
  .block-article-card:hover .block-article-card__image-wrapper img,
  .block-article-card:hover .block-article-card__image-wrapper svg {
    transform: none;
  }
}

.block-article-card__date-author {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  flex-shrink: 0;
  margin-top: 1rem;
  opacity: 0.6;
}

.block-article-card__date-author-item {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.block-article-card__date-author-item .icon {
  flex-shrink: 0;
}

.block-article-card__button {
  padding-block-end: 2px;
}

.block-article-card__title {
  display: -webkit-box;
  flex-shrink: 0;
  overflow: hidden;
  -webkit-line-clamp: var(--max-row);
  -webkit-box-orient: vertical;
}

.block-article-card__excerpt {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: var(--max-row);
  -webkit-box-orient: vertical;
}

.block-article-card__excerpt--content-preview {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  font-size: 16px;
}

.block-article-card__content-preview {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: var(--max-row);
  -webkit-box-orient: vertical;
}

.block-article-card__content-preview--rows-unset {
  display: block;
  -webkit-line-clamp: unset;
}

.block-article-card__content-preview--rows-1 {
  --max-row: 1;
}

.block-article-card__content-preview--rows-2 {
  --max-row: 2;
}

.block-article-card__content-preview--rows-3 {
  --max-row: 3;
}

.block-article-card__content-preview--rows-4 {
  --max-row: 4;
}

.block-article-card__content-preview--rows-5 {
  --max-row: 5;
}

.block-article-card__info {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  min-height: 0;
  color: rgb(var(--color-text));
}