/*  COMPONENT: PAGE TITLE
//////////////////////////////////////////////////////////////////////////////*/

@layer components {
    .page-title {
        font-size: var(--font-size-xl);
        line-height: var(--line-height-xl);
        font-weight: var(--font-weight-headings);
        text-wrap: balance;
        margin: 0;
    }

    .page-title::after {
        content: "";
        width: var(--separator-width);
        height: var(--separator-height);
        display: block;
        background-color: var(--color-red);
        margin-top: var(--spacing-s);
    }
}