/**************************
 # COMPONENT: PAGE SUMMARY
 **************************/

.page-summary {
  grid-column: main-start / main-end;

  p + & {
    margin-block-start: var(--space-xl);
  }

  &:not(:last-child) {
    margin-block-end: var(--space-xl);
  }

  .page-summary__heading {
    margin-block: 0 var(--space-xs);

    h2 {
      line-height: 1;
      font-size: var(--text-l);
      margin-block: 0;
    }

    p {
      margin-block-start: var(--space-xs);
    }

    a {
      color: var(--text-color-body);

      &:hover {
        color: var(--text-color-link);
      }
    }
  }

  .page-summary__subtitle {
    color: var(--text-color-secondary);
    font-family: var(--font-family-heading);
    font-weight: normal;
  }

  > .tag {
    font-size: var(--text-s);
  }
}