Hide an element off the screen when it reaches the edge of another element

Question

I have about the same structure. The width of the central content part is 1080px. .corner is an angle with absolute positioning that cuts off the right side of the header.

The problem is that when the screen narrows, this angle goes to the content part. I will hide it from mobile devices altogether, but on other resolutions I would like it to just go off the screen when it rests on the left side of the content part.

<div class="header">
    <div class="corner"></div>
    <div class="header-content">
        Some kind of header content
    </div>
</div>
<div class="main">
    <div class="content">
        Some kind of main content
    </div>
</div>

My CSS

.header {
    max-width: 1080px;
    margin: 0 auto;
    padding: 10px;
    background-color: #FAAC38;
}
.corner {
    width: 253px;
    position: absolute;
    right: 0;
    border: 0 solid #f8f9fa;
    border-bottom-width: 168px;
    border-top-width: 0px;
    border-left: 168px solid #FAAC38;
}
.main {
    max-width: 1080px;
    margin: 5px auto;
    padding: 60px;
    background-color: #fff;
    border: 1px solid #e9ecef;
}

I made a gif