ArticleTemplates/assets/scss/layout/_support.scss

.support {
    font-family: $guardian-sans;
    @include meta();
    background-color: color(brightness-100);
    padding: base-px(1);

    .prose {
        h2 + p,
        h2 + ul,
        h3 + p {
            margin-top: 0;
        }

        h2 {
            margin-bottom: 0;

            & + h3 {
                margin: base-px(.75, 0, 0, 0);
            }
        }

        h3 {
            @include body();
        }

        figure.element-image {
            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    @media (prefers-color-scheme: dark) {
        $whiteTwo: #dcdcdc;
        $blackThree: #121212;
        background-color: $blackThree;

        .prose {
            p,
            h2,
            h3,
            ul,
            a,
            li {
                color: $whiteTwo;
            }

            a {
                background-image: linear-gradient(rgba(220, 220, 220, 0.33) 0%, rgba(220, 220, 220, 0.5) 100%);
                background-repeat: repeat-x;
                background-size: 1px 1px;
                background-position: 0 bottom;
            }
        }
    }
}

// Android dark mode styles
.body.dark-mode-on .support {
    $whiteTwo: #dcdcdc;
    $blackThree: #121212;
    background-color: $blackThree;

    .prose {
        p,
        h2,
        h3,
        ul,
        a,
        li {
            color: $whiteTwo;
        }

        a {
            background-image: linear-gradient(rgba(220, 220, 220, 0.33) 0%, rgba(220, 220, 220, 0.5) 100%);
            background-repeat: repeat-x;
            background-size: 1px 1px;
            background-position: 0 bottom;
        }
    }
}