.c-hero {
    margin-bottom: $line-height * 2em;
    margin-left: -1 * $page--item-prefix--width;
    padding-left: $page--item-prefix--width;
    overflow: hidden;
    font-family: $font-fam--mono;

    &::after {
        content: str-repeat('░', 120);
        display: block;
        position: relative;
        z-index: -10;
        height: $line-height;
        margin-top: px-to-em(2px);
        margin-left: -1 * $page--item-prefix--width;
        padding-top: px-to-em(2px);
        border-top: 1px solid var(--fg-hi);
        color: var(--fg-hi);
        line-height: $code-block--line-height;
    }

    &__pre {
        margin-top: 0;
        overflow: hidden;
    }

    @media (max-width: map-get($breakpoints, 'sm')) {
        margin-left: 0;
        padding-left: 0;

        &::after {
            margin-left: 0;
        }
    }
}