article {
    display: flex;
    flex-direction: column;
    --gapBetweenSections: calc(var(--base-gap) * 7);

    background-repeat: no-repeat;

    > section {
        --bgColor: transparent;
        --fgColor: var(--color-base);

        background-color: var(--bgColor);
        color: var(--fgColor);

        width: 100%;
        margin: 0 auto;

        box-sizing: border-box;

        & + &,
        & + .separator,
        .separator + & {
            margin-top: var(--gapBetweenSections);
        }

        &.isolated {
            padding-top: var(--gapBetweenSections);
            padding-bottom: var(--gapBetweenSections);
        }

        &.inverse {
            --bgColor: var(--color-primary);
            --fgColor: #fff;

            .wrapper > div > .screenshot,
            .wrapper > div > .panel {
                margin-top: calc(var(--gap-big) * -1);
                margin-bottom: calc(var(--gap-big) * -1);
            }
        }

        > .wrapper {
            width: var(--content-width);
            max-width: 100%;
            margin: 0 auto;
            padding-left: var(--gap-bigger);
            padding-right: var(--gap-bigger);
            box-sizing: border-box;

            &.inverse {
                --bgColor: var(--color-primary) !important;
                --fgColor: #fff !important;

                background-color: var(--bgColor);
                color: var(--fgColor);

                border-radius: var(--border-radius);
            }
        }

        &.header {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: var(--base-gap);

            max-width: 600px;
            margin-top: var(--gap-bigger);

            > h1 {
                font-size: 30pt;
                color: var(--color-primary);
                text-wrap: balance;
                text-align: center;
            }
        }

        &.banner {
            > .wrapper {
                width: var(--content-width-narrower);

                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: var(--base-gap);

                margin: 0 auto;

                > h2 {
                    color: var(--fgColor);
                    text-wrap: pretty;
                }

                > .intro {
                    color: var(--fgColor);
                }
            }
        }

        &.footer {

            border-top: solid var(--color-base-faintest) 1px;
            margin-top: var(--gap-biggest);

            > .wrapper {
                padding-top: var(--gap-bigger);
                padding-bottom: var(--gap-bigger);

                display: grid;
                grid-template-columns: 1fr 2fr;
                grid-template-areas: "main navigation";
                align-items: start;

                gap: var(--gap-biggest);

                @media all and (max-width: 800px) {
                    grid-template-columns: 1fr;
                    grid-template-areas:
                        "main"
                        "navigation";
                }

                > .main {
                    grid-area: main;

                    display: flex;
                    flex-direction: column;
                    gap: var(--gap-big);

                    > .logo {
                        width: 110px;
                        float: left;
                        background-color: currentColor;
                        aspect-ratio: 3.909;
                        mask-repeat: no-repeat;
                        mask-position: center;
                    }
                }

                > .navigation {
                    grid-area: navigation;

                    display: flex;
                    gap: var(--gap-bigger);
                    flex-wrap: wrap;

                    > .column {
                        display: flex;
                        flex-direction: column;
                        gap: calc(var(--base-gap) / 2);

                        > .title {
                            opacity: var(--faintOpacity);
                            /* margin-bottom: var(--base-gap); */
                        }

                        a {
                            color: var(--base-color);
                        }
                    }
                }
            }
        }

        &.bottomFooter {
            border-top: solid var(--color-base-faintest) 1px;

            > .wrapper {
                margin-top: 0;
                padding-top: var(--gap-big);
                padding-bottom: var(--gap-big);

                display: flex;
                flex-wrap: wrap;
                gap: var(--gap-bigger);
                row-gap: .3em;

                @media all and (max-width: 600px) {
                    justify-content: flex-start;
                    gap: var(--gap-big);
                    row-gap: .2em;
                }

                @media all and (min-width: 1000px) {
                    > .end {
                        margin-left: auto;
                    }
                }

                a {
                    color: var(--base-color);
                }
            }
        }

        &.inverse + &.inverse {
            border-top: solid var(--color-base-faintest) 1px;
        }

    }

    > *:first-child:is(section) {
        padding-top: var(--gap-biggest);
    }

    > img.separator {
        float: left;

        &.inverse {
            background-color: var(--color-primary);
        }
    }

}