Background graphic on News homepage is being cut off.

[Nyiriland]

Issue The background "brush stroke" graphic (created with body.news-front-page .front__site-title::after) is cut off on desktop sizes. I've turned the graphic green in the screenshot below for clarity:

Solution

1. To remove the gap on the right side: increase left on the above pseudo element to left: 200px; (all screen widths)
2. To prevent the bottom of the brushstroke from cutting off, the best way I can figure it out is to add the CSS below:

@media (min-width: 1042px) {
body.news-front-page .front__site-title::after {
    height: auto;
    aspect-ratio: 842 / 130;
}
}

^ What this does: at the viewport width of 1042px, the point where the graphic starts overflowing its container height (due to the svg mask-size set to 'cover'), we lock the container to an aspect ratio so the graphic continues to scale with the expanding viewport width.

Note the above code has only been tested in Chrome.