.header-transparent ~ #main > .blog-post-title {
  padding-top: calc(var(--header-height, 114px) - var(--top-bar-height, 0px));
}

.blog-post-title {
  --blog-padding-x: var(--horizontal-padding-mobile, 16px);

  width: 100%;
  max-width: var(--max-width, 1440px);
  margin: 32px auto 0;
  padding: 0 var(--blog-padding-x);
  text-align: center;
  line-height: var(--line-height-lg);
}

.blog-post__title {
  margin-bottom: 8px;
}

.blog-post__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: calc(var(--font-size-regular) - 2px);
  color: var(--color-outline);
}

.blog-post__featured-image-wrapper {
  margin: 24px 0;
}

.blog-post__featured-image {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 480px;
  max-width: none;
  object-fit: cover;
}

.blog-post-content {
  --blog-padding-x: var(--horizontal-padding-mobile, 16px);

  width: 100%;
  margin: 0 auto;
  padding: 32px var(--blog-padding-x);
  max-width: var(--max-width, 1440px);
  line-height: var(--line-height-lg);
  color: var(--color-primary);
}

.blog-post-content img {
  border-radius: var(--border-radius-rounded);
}

@media (min-width: 1200px) {
  .blog-post-title {
    --blog-padding-x: var(--horizontal-padding);
  }

  .blog-post-content {
    --blog-padding-x: var(--horizontal-padding);
  }
}