@layer components {
    main {
        & header {
            margin-bottom: var(--space-s);
            border-bottom: solid 0.5rem var(--color--border);
            margin-bottom: var(--space-m-new);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: start;
            padding-bottom: var(--space-m);

            & hgroup:has(+ *) {
                margin-bottom: var(--space-m);
            }

            & h1 {
                border: none;
                margin-bottom: 0;

                &:has(+ p) {
                    margin-bottom: var(--space-s);
                }
            }

            & p {
                margin-bottom: 0;

                font-family: var(--font--title--family--small);
                font-weight: var(--font--title--weight--small);
                font-size: var(--font--title--size--small);
                line-height: var(--font--title--line-height--small);
                letter-spacing: var(--font--title--letter-spacing--small);
                text-transform: var(--font--title--casing--small);
            }
        }
    }

    @media screen and (min-width: 600px) {
        main {
            & header {
                flex-direction: row;
                align-items: end;

                & hgroup {
                    margin-bottom: 0;
                }
            }
        }
    }
}