main {
    background-image:url('images/triangle-banner.png');
    background-repeat:no-repeat;
    background-size: initial;
    background-position-x: 115%;
    background-position-y: 2rem;
    padding-bottom: 4rem;
}
main::after {
    content: "";
    height: 30rem;
    width: 30rem;
    display: block;
    background-color: var(--gfColors-slate15);
    border-radius: 50%;
    position: absolute;
    top: -12rem;
    right: 1rem;
    z-index: -1;
}


@media (min-width:576px) and (max-width:991.98px) {
    main {
        background-image:url('images/triangle-banner.png');
        background-repeat:no-repeat;
        background-size: 60vw;
        background-position-x: 125%;
        background-position-y: 2rem;
    }
}
@media (min-width:1400px) {
    main {
        background-position-x: 107%;
    }
}

@media (min-width:2000px) {
    main {
        background-position-x: 95%;
    }
    main::after {
        right:16rem;
    }
}

@media (max-width:767.98px) {
    main::after {
        height: 22rem;
        width: 22rem;
    }
}
@media (max-width:575.98px) {
    main {
        background-image:none;
    }
    .sectionTitle, .sectionTitle h1 {
        margin-bottom:0;
    }
    main::after {
        display:none;
    }
}