.template-earth {
    background-color: #000;
    color: #fff;

    --fade-out-height: 4lh;

    & > .earth {
        grid-column: 1 / -1;
        grid-row: 1;

        display: grid;
        justify-content: end;

        & img {
            display: block;
            width: auto;
            height: 100%;
            object-fit: cover;
        }
    }

    & > .prose {
        padding: var(--heading-margin) 0;
        padding-bottom: calc(var(--heading-margin) + var(--fade-out-height));

        grid-column: center-start 1 / center-end 6;
        grid-row: 1;
        max-width: 60ch;

        & .bg {
            background-color: #000;
            border-radius: 0.6rem;
            padding: 0.1lh 0.5ch;
            margin: -0.1lh -0.5ch;

            -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
        }
    }

    &::after {
        content: "";

        grid-column: 1 / -1;
        grid-row: 1;
        align-self: end;
        height: var(--fade-out-height);

        background: linear-gradient(
            to top,
            rgb(from var(--background-color) r g b / 100%),
            rgb(from var(--background-color) r g b / 97%),
            rgb(from var(--background-color) r g b / 90%),
            rgb(from var(--background-color) r g b / 78%),
            rgb(from var(--background-color) r g b / 62%),
            rgb(from var(--background-color) r g b / 43%),
            rgb(from var(--background-color) r g b / 22%),
            rgb(from var(--background-color) r g b / 0%)
        );
    }

    @media (max-width: 800px) {
        & > .earth {
            grid-column: 1 / -1;
            grid-row: 1;

            & > img {
                grid-column: 1;
                grid-row: 1;
                max-width: 40vh;
            }

            &::after {
                grid-column: 1;
                grid-row: 1;
                align-self: end;

                content: "";
                display: block;

                width: 100%;
                height: 10vh;

                /* workaround for silly rounding errors */
                position: relative;
                top: 0.05rem;

                background: linear-gradient(
                    to top,
                    rgb(0 0 0 / 100%),
                    rgb(0 0 0 / 61%),
                    rgb(0 0 0 / 29%),
                    rgb(0 0 0 / 7%),
                    rgb(0 0 0 / 0%)
                );
            }
        }

        & > .prose {
            grid-row: 2;
            padding: 1lh 0;
            padding-bottom: calc(1lh + var(--fade-out-height));
            max-width: none;
        }

        &::after {
            grid-row: 2;
        }
    }
}