.portrait-background {
    background-color: @white;
    width: 200%;
    height: 800px;
    position: absolute;
    border-radius: 50%;
    transform: translateX(-30%) translateY(-55%); 

    &.orange {
        background-color: @backgroundColor;
        transform: translateX(-25%) translateY(-50%); 
    }
}

@media (min-width: 500px) and (max-width: 550px) {
    .portrait-background {
        transform: translateX(-30%) translateY(-50%);

        &.orange {
            transform: translateX(-25%) translateY(-45%);
        }
    }
}

@media (min-width: 550px) and (max-width: 750px) {
    .portrait-background {
        transform: translateX(-30%) translateY(-45%);

        &.orange {
            transform: translateX(-25%) translateY(-40%);
        }
    }
}

@media (min-width: 750px) and (max-width: 865px) {
    .portrait-background {
        transform: translateX(-30%) translateY(-35%);

        &.orange {
            transform: translateX(-25%) translateY(-30%);
        }
    }
}

@media (min-width: 865px) {
    .portrait-background {
        transform: translateX(-30%) translateY(-22%);

        &.orange {
            transform: translateX(-25%) translateY(-18%);
        }
    }
}