Solved Liner Gradient BG question

I had a quick question about a background gradient, and if there's a way to do it better/hard code it typa thing.

Here's 2 example product pages:
https://vscrtest.crosscutcoffee.ca/shop/pcmsf/
https://vscrtest.crosscutcoffee.ca/shop/mpbsf/

On both you'll notice the background behind the product info/images is cut between grey and white. But it appears at different heights on each page - due to the length of the description of the product.

I'm very certain it has to do with the fact that I used percentages for the linear gradient css, as you can see below. I was wondering is there a better way to do it so that the white hits a certain point everytime, and the grey starts/continues to the end of the section no matter the length of the product description?

.et_pb_section.single-product-top-section {
padding-top: 0px;
background-image: linear-gradient(180deg, white 40%, #F7F7F7 40%);
}

Thanks!

 

That worked, thank you!