article {
    position: relative;

    display: flex;
    flex-direction: column;

    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%;

    box-sizing: border-box;

    overflow: hidden;

    > canvas {
        position: absolute;
        inset: 0;
        width: 100vw;
        height: 100%;

        transform: scaleX(1.2) scaleY(1.2) scaleZ(1.2) rotateX(15deg) rotateY(-13deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px) skewX(0deg) skewY(0deg);

        z-index: -1;
    }

    > section {

        --bgColor: var(--color-background);
        --fgColor: var(--color-base);
        --fgColorFaint: var(--color-base-faint);

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

        width: 100%;
        margin: 0 auto;

        box-sizing: border-box;

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

        &.dark {
            --bgColor: var(--color-background-dark);
            --fgColor: var(--color-base-light);
            --fgColorFaint: var(--color-base-faint);

            .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;

            &.dark {
                --bgColor: var(--color-background-dark) !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-base);
                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-2) 1px;

            &.dark {
                border-top-color: var(--color-base);
            }

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

                display: grid;
                grid-template-columns: 1fr 3fr;
                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 {
                            color: var(--fgColorFaint);
                            font-weight: 500;
                        }

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

        &.bottomFooter {

            border-top: solid var(--color-base-faintest-2) 1px;

            &.dark {
                border-top-color: var(--color-base);
            }

            > .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);
                }
            }
        }

    }

    > img.separator {
        float: left;
    }

}