@layer components {
    content-container {
        display: block;
        margin: 0 auto;
        padding: var(--size-6);

        width: 100%;
        max-width: var(--size-lg, 1280px);

        main > & {
            width: 100vw;
        }

        @media screen and (max-width: 768px) {
            padding: var(--size-6) var(--size-4);
        }

        &[admin] {
            background: var(--color-bordergrey);
            max-width: 100%;
            padding-inline: 0;

            >div {
                max-width: var(--size-lg, 1280px);
                margin: 0 auto;
                padding-inline: var(--size-6);


                display: grid;
                grid-template-columns: minmax(320px, auto) repeat(auto-fit, 340px);
                gap: var(--size-6);


                &> :is(article, aside, form) {
                    display: inherit;
                    gap: inherit;
                    align-content: start;
                }

                @media screen and (max-width: 768px) {
                    grid-template-columns: 1fr;
                    padding-inline: var(--size-4);
                }
            }
        }

        &[layout] {
            display: grid;
            grid-template-columns: minmax(320px, auto) repeat(auto-fit, 340px);
            gap: var(--size-6);

            &> :is(article, aside, form) {
                display: inherit;
                gap: inherit;
                align-content: start;
            }

            @media screen and (max-width: 768px) {
                grid-template-columns: 1fr;
            }
        }

        &[layout=col-two] {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--size-6);

            @media screen and (max-width: 768px) {
                grid-template-columns: 1fr;
            }
        }

        &[layout=col-three] {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: var(--size-6);

            @media screen and (max-width: 768px) {
                grid-template-columns: 1fr;
            }
        }

        &[layout=page-header] {
            max-width: 100%;
            padding: var(--size-2);
            background: url(/images/carbon@1x.png), radial-gradient(55% 120% at 70% 0, #626262 0%, #040b1b 100%);

            header {
                width: 100%;
                max-width: var(--size-lg, 1280px);
                margin: 0 auto;
                padding: var(--size-6);
                color: var(--color-white);

                .job-title a {
                    color: var(--color-white);
                }
            }

        }
    }
}