article.article {
    padding:  0 0 calc(var(--gutter-width) * 5) 0;

    section#hero.hero--article {
            position: relative;

            .spacer {
                height: 33svh;
                width: 100%;
            }

            .hero--abstract {
                position: relative;
                max-width: 100%;
                margin: 0 auto;

                background: var(--white);
                background-blend-mode: difference;
                padding: calc(var(--gutter-width) * 2);
                z-index: 1;

                @media(min-width: 576px) {
                    max-width: 540px;
                    padding: calc(var(--gutter-width) * 3);
                }
                @media(min-width: 768px) {
                    max-width: 720px;
                    padding: calc(var(--gutter-width) * 4);
                }
                @media(min-width: 992px) {
                    max-width: 960px;
                    padding: calc(var(--gutter-width) * 5);
                }
                @media(min-width: 1200px) {
                    max-width: 1140px;
                    padding: calc(var(--gutter-width) * 6);
                }
                @media(min-width: 1400px) {
                    max-width: 1320px;
                }
                @media(min-width: 2560px) {
                    max-width: 1500px;
                    padding: calc(var(--gutter-width) * 7);
                }

                i.ph-fill {
                    position: absolute;
                    top: calc(var(--gutter-width));
                    right: calc(var(--gutter-width));
                    font-size: calc(var(--font-size-base) * 8);

                    opacity: 0.5;
                    z-index: 0;

                    &.ph-church {
                        color: var(--faith);
                    }
                    &.ph-game-controller {
                        color: var(--gaming);
                    }
                    &.ph-head-circuit {
                        color: var(--thoughts);
                    }

                    @media (min-width: 576px) {

                    }
                    @media (min-width: 768px) {
                        top: calc(var(--gutter-width) * 1);
                        right: calc(var(--gutter-width) * 1);

                        font-size: calc(var(--font-size-base) * 4);
                    }
                    @media (min-width: 1200px) {
                        top: calc(var(--gutter-width) * 1.5);
                        right: calc(var(--gutter-width) * 1.5);
                    }
                    @media (min-width: 1400px) {
                        top: calc(var(--gutter-width) * 2);
                        right: calc(var(--gutter-width) * 2);
                    }
                    @media (min-width: 2560px) {
                        top: calc(var(--gutter-width) * 3);
                        right: calc(var(--gutter-width) * 3);
                    }
                }

                .headline--hero {
                    position: relative;
                    display: inline-block;
                    z-index: 1;
                }
            }
        }

    .article__content {
        position: relative;
    }
}