.blog-article {
  --reading-width: 688px;
  --article-text: #5b5b5b;
  display: grid;
  gap: 40px;
}

.blog-article__column {
  width: 100%;
  max-width: var(--reading-width);
  margin-inline: auto;
}

.blog-article__intro {
  display: grid;
  gap: 8px;
}

.blog-article__dek,
.blog-article__meta {
  color: var(--text-footer);
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
}

.blog-article__hero,
.blog-article__image {
  width: 100%;
  height: auto;
}

.blog-article__hero {
  border-radius: var(--radius-xl);
}

.blog-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 16px;
}

.blog-article__body {
  display: grid;
  gap: 40px;
  color: var(--article-text);
  font-weight: 500;
  line-height: 24px;
}

.blog-article__body h2 {
  margin-bottom: 8px;
  color: var(--text);
  font-size: inherit;
  font-weight: 500;
}

.blog-article__body p + p {
  margin-top: 24px;
}

.blog-article__image {
  border-radius: 16px;
}

.blog-about .about-text {
  color: var(--text-footer);
  gap: 24px;
}

.blog-about .btn {
  align-self: flex-start;
  margin-top: 8px;
  line-height: 24px;
}

@media (prefers-color-scheme: dark) {
  .blog-article { --article-text: #bcbcbc; }
}

@media (max-width: 700px) {
  .blog-page {
    --section-gap: 64px;
  }

  .blog-article,
  .blog-article__body {
    gap: 32px;
  }

  .blog-article__dek,
  .blog-article__meta,
  .blog-article__body {
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.16px;
  }

  .blog-article__hero,
  .blog-article__image {
    border-radius: var(--radius-lg);
  }
}