@layer components {
    article.the-latest {
        margin-bottom: var(--space-xl);
        padding: var(--space-xl) var(--space-xl);

        & header {
            border-bottom: none;
            display: block;

            & div {
                & h2 {
                    margin-bottom: var(--space-m);

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

                & span {
                    margin-bottom: var(--space-m);

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

            & p {
                font-family: "Just Saying";
                font-size: 1.75rem;
                font-weight: 400;
                line-height: 1.15;
                letter-spacing: -0.08
            }
        }

        & > section {
            & h3 {
                border-bottom: solid var(--size--border) var(--color--border);
                padding-bottom: var(--space-s);


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

            & > section {
                &:has(+ section) {
                    margin-bottom: var(--space-l);
                }

                & h4 {
                    font-family: var(--font--title--family--xsmall);
                    font-size: var(--font--title--size--xsmall);
                    font-weight: var(--font--title--weight--xsmall);
                    line-height: var(--font--title--line-height--xsmall);
                    letter-spacing: var(--font--title--letter-spacing--xsmall);
                    text-transform: var(--font--title--casing--xsmall);
                }

                & p {
                    font-family: var(--font--caption--family--medium);
                    font-size: var(--font--caption--size--medium);
                    font-weight: var(--font--caption--weight--medium);
                    line-height: var(--font--caption--line-height--medium);
                    letter-spacing: var(--font--caption--letter-spacing--medium);
                    text-transform: var(--font--caption--casing--medium);
                }
            }


            &.hero {
                & h3 {
                    border-bottom: solid 8px var(--color--border);

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

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

                    & p {
                        font-family: var(--font--text--family--medium);
                        font-size: var(--font--text--size--medium);
                        font-weight: var(--font--text--weight--medium);
                        line-height: var(--font--text--line-height--medium);
                        letter-spacing: var(--font--text--letter-spacing--medium);
                        text-transform: var(--font--text--casing--medium);
                    }
                }
            }
        }
    }


    @media screen and (min-width: 600px) {
        article.the-latest {
            & header > div {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            & header > p {
                font-size: 2rem;
            }
        }
    }
}