@layer components {
    .section-heading {
        text-align: center;
        max-width: 42rem;
        margin-inline: auto;

        & .section-heading__title {
            color: var(--color-text);
            font-size: var(--size-step-2);
            position: relative;
            display: inline-block;

            &::after {
                content: '';
                display: block;
                width: 3rem;
                height: 4px;
                border-radius: var(--radius-full);
                background: var(--gradient-brand);
                margin: var(--space-xs) auto 0;
            }
        }

        & .section-heading__subtitle {
            color: var(--color-text-muted);
            margin-block-start: var(--space-s);
        }
    }
}