.block-blog-heading {
  padding-block: 48px 36px;
}

.block-blog-heading__box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: 820px;
}

.block-blog-heading__title {
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;
}

.block-blog-heading__text {
  color: var(--ib-muted);
  font-size: 17px;
  line-height: 1.65;
}

.block-blog-heading__text p {
  margin: 0 0 .6em;
}

.block-blog-heading__text p:last-child {
  margin-bottom: 0;
}

.block-blog-heading__terms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.block-blog-heading__term {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--ib-line);
  border-radius: 999px;
  background: var(--ib-bg);
  color: var(--ib-fg);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color var(--ib-motion) var(--ib-ease), color var(--ib-motion) var(--ib-ease), background-color var(--ib-motion) var(--ib-ease);
}

.block-blog-heading__term:hover {
  border-color: var(--ib-accent);
  color: var(--ib-accent);
}

.block-blog-heading__term.is-active {
  border-color: var(--ib-accent);
  background: var(--ib-accent);
  color: var(--ib-accent-contrast);
}

.block-blog-heading__count {
  font-size: 12px;
  opacity: .6;
}

@media (max-width: 640px) {
  .block-blog-heading {
    padding-block: 28px 24px;
  }

  .block-blog-heading__terms {
    flex-wrap: nowrap;
    margin-top: 20px;
    margin-inline: calc(var(--ib-gutter) * -1);
    padding-inline: var(--ib-gutter);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .block-blog-heading__terms::-webkit-scrollbar {
    display: none;
  }

  .block-blog-heading__term {
    flex: none;
  }
}