@layer components {
    highlight-cards {
        display: grid;
        gap: var(--size-4);

        & header {
            text-align: var(--alignment, left);
        }

        & ul {
            display: grid;
            grid-template-columns: repeat(2, minmax(120px, 200px));
            justify-content: center;
            list-style-type: none;
            margin: 0;
            padding: 0;
            gap: var(--size-4);

            :is(li, [role="listitem"]) {
                position: relative;

                /* tablet and up */
                @media screen and (min-width: 768px) {
                  width: unset;
                }
            }

            & .highlight-card {
                width: 100%;
            }

            /* tablet and up */
            @media screen and (min-width: 768px) {
                justify-content: space-between;
                grid-template-columns: repeat(4, minmax(180px, 220px));
            }

            /* desktop and up */
            @media screen and (min-width: 960px) {
                grid-template-columns: repeat(4, minmax(200px, 320px));
            }

        }
    }

    /*
    h2:has(~ highlight-cards) {
        color: var(--heading-color, #333);
    }

    p:has(~ highlight-cards) {
        color: var(--body-color, #333);
    }
    */

    .highlight-card {
        display: grid;
        gap: var(--size-4);
        background-color: var(--highlight-card-background-color, #EFEFEF);
        width: 100%;

        &.centered {
            text-align: center;
        }

        :is(header) {
            display: grid;
            gap: var(--size-4) !important;

            color: var(--heading-color, #333333);

            > .highlight-card__title {
                font-size: var(--font-size-3);
                font-weight: 700;
                padding: 0 var(--size-4);
            }

            > .highlight-card__subtitle {
                font-size: var(--font-size-2);
                padding: 0 var(--size-4);
                color: var(--sub-heading-color, #333333);
            }
        }

        > p {
            padding: 0;
            margin: 0;
            color: var(--body-color, #333333);
        }

        > .highlight-card__text {
            padding: 0 var(--size-4);
        }
    }
}