/**************************
 # 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__date {
    color: var(--text-color-secondary);
    display: block;
    font-size: var(--text-s);
    line-height: 1;
  }

  .page-summary__title {
    font-size: var(--text-l);
    line-height: 1;
    margin-block: 0;

    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;
  }

  :is(
    .page-summary__heading,
    .page-summary__subtitle,
    .page-summary__content,
    .page-summary__date
  ):not(:last-child) {
    margin-block-end: var(--space-xs);
  }
}