.migration-guide {
  h1,
  h2,
  h3 {
    color: var(--migration-guide-title-color);
  }

  h2 {
    margin-block: 5rem 1rem;

    &:first-child {
      margin-top: 3rem;
    }
  }

  h2 + h3 {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    text-wrap: pretty;
  }

  h3 {
    margin-block: 2rem 1rem;
  }

  .heading-meta {
    margin-bottom: 1rem;
  }

  hr {
    height: 1px;
    color: var(--migration-guide-hr-color);
    background: var(--migration-guide-hr-color);
    font-size: 0;
    border: 0;
    margin-block: 2rem;
  }
}

.migration-guide-legacy {
  h3 {
    margin-top: 2rem;
    padding-top: 2rem;
    margin-bottom: 0.1rem;
    border-top: solid var(--migration-guide-hr-color-legacy) 1px;
  }

  .migration-guide-area-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    color: var(--migration-guide-legacy-area-tags-color);
  }

  .migration-guide-area-tag {
    display: block;
    font-size: 0.8rem;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
    line-height: 1;
    border-radius: 0.3rem;
    border-style: solid;
    border-width: 1px;
  }

  ul.migration-guide-pr-list {
    list-style: none;
    padding: 0px;
  }

  p,
  ul,
  li,
  code {
    font-size: 1rem;
  }
}
