:root {
  --text-color__subtitle: #999999;
  --text-color__title: #111111;
  --text-color__excerpt: #555555;
}

a.article-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  margin: var(--size-sm) 0;
  transition: opacity 0.3s ease; /* Плавный переход за 0.3 секунды */
}

a.article-card .block {
  flex-grow: 0; /* не растягивается */
  flex-shrink: 0; /* не сжимается */
  flex-basis: auto; /* ширина по контенту */
}
a.article-card .block.stretch {
  flex-grow: 1; /* растягивается */
  flex-shrink: 1; /* сжимается */
  flex-basis: 0%; /* начальная точка 0 */
  min-width: 0;
}

.article-card:hover {
  opacity: 0.6;
}

.article-img {
  background: linear-gradient(var(--bg-color-primary), var(--bg-color-default));
  background-size: cover;
  background-position: 50%;
  height: 200px;
  width: 100%;
  border-radius: var(--border-radius-img);
}

.article-img.article-img__default {
  height: 200px;
}

.article-img.article-img__small {
  height: 131px;
}

.article-img.article-img__large {
  height: 382px;
}

.article-details {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--size-xs);
  padding-top: var(--size-xs);
  height: 50%;
  box-sizing: border-box;
}

.article-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--size-xs);
}

.article-meta__authors {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.article-card .article-meta__authors-names {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Number of lines to show */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; /* Adds the ellipsis (...) */
}

.childlab-avatars {
  display: flex;
  flex-direction: row;
  margin-right: 20px;
}

.childlab-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--white);
  margin-right: -16px;
}

.article-meta {
  font-weight: var(--font-weight-500);
  font-size: var(--font-size-13);
  color: var(--dark-grey-1);
}

.article-details__title {
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-500);
  color: var(--color-title);
}

.article-details__subtitle {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-400);
  color: var(--color-subtitle-1);
}

.article-details__excerpt {
  color: var(--color-default);
  font-size: medium;
}

.article-details__excerpt p {
  margin: 0;
}

.articles-list__header {
  margin-bottom: var(--size-md);
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-500);
  color: var(--color-subtitle-1);
}

.article-button__wrapper {
  justify-content: center;
}

.article-button {
  display: inline-block;
  padding: 8px 24px;
  text-decoration: none;
  background-color: var(--purple);
  color: var(--white);
  border-radius: 8px;
  width: fit-content;
}