body#marketing {
    & main {
        background-image: var(--cover-pattern-repeat);
        background-repeat: repeat;
        background-size: clamp(10rem, 32vw, 20rem);
        color: #000C66;
        text-align: center;
        padding-bottom: 0;

        & section {
            & header.prominent {
                display: block;
                text-align: center;

                & h1 {
                    margin-bottom: var(--space-s);
                }

                & h2 {
                    margin-bottom: 0;
                }
            }

            & p {
                margin-bottom: 0;

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

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

        & div.highlight {
            background-color: var(--color--brand--highlight);
            padding: var(--space-l);
            margin-inline: calc(var(--space-l) * -1);
            border-block: solid var(--size--border) var(--color--border);

            &:not(:has(+ *)) {
                border-bottom: none;
            }

            & section {
                margin-bottom: 0;
            }
        }

        & form {
            display: flex;
            flex-direction: column;
            row-gap: var(--space-xs-new);
        }
    }
}


@media (min-width: 600px) {
    body#marketing {
        & main {
            & section {
                max-width: 1000px;
                margin: auto;
            }

            & div.highlight {
                margin-inline: calc(var(--space-xl) * -1);

            }
        }
    }
}

@media (min-width: 1000px) {
    body#marketing {
        max-height: none;
        height: auto;
        overflow-y: auto;

        & main {
            display: flex;
            flex-direction: column;
            overflow: hidden;
            grid-column: 1 / -1;

            & h1 {
                font-size: 6rem;
            }

            & section {
                flex-grow: 1;

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

                    font-size: 1.75rem;
                }
            }

            & div.highlight {
                margin-inline: calc(var(--space-2xl) * -1);
                padding-block: var(--space-2xl);
            }

            & form {
                flex-direction: row;
                justify-content: center;
            }
        }
    }
}