how to css after elements for background overlays

.banner::after, .banner::before {    ...}.banner::after {    opacity: .7;    @supports (mix-blend-mode: hue) {        opacity: 1;        mix-blend-mode: color;        mix-blend-mode: hard-light;        mix-blend-mode: hue;    }}.banner::after {    ...    z-index: 1;}.banner > * {    z-index: 100;}<section class="banner">    <h1>Hello World</h1></section>.banner::before {    transform: skew(-15deg)                translateX(-50%);}.banner {    overflow: hidden;}.banner::after {    content: "";  // :before and :after both require content    position: absolute;    width: 75%; // Makes the overlay smaller to accommodate the skew    height: 100%;    top: 0;    left: 50%; // Push the element 50% of the container's width to the right    transform: skew(15deg) // Puts the element on an angle               translateX(-50%); // Moves the element 50% of its width back to the left    background-image: linear-gradient(120deg,#eaee44,#33d0ff);}.banner::after {    /* opacity: .7; */    mix-blend-mode: color;    mix-blend-mode: hue;    mix-blend-mode: hard-light;}.banner::after {    content: ""; // ::before and ::after both require content    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    background-image: linear-gradient(120deg, #eaee44, #33d0ff);    opacity: .7;}.banner::after, .banner::before {    content: "";     position: absolute;    top: 0;    left: 50%;    transform: skew(15deg)               translateX(-50%);    width: 75%;    height: 100%;    background-image: linear-gradient(120deg,#eaee44,#33d0ff);    background-color: #333;    opacity: .7;}.banner::before {    transform: skew(-15deg)                translateX(-50%);}.banner {    overflow: hidden;}