A bit more of a complicated issue here, but I broke up my product-form for UX purposes. See images below for an example of what I did.
For the most part, it all works fine. The only issue now is when selecting variants, the unavailable ones will not update after selecting new variants. For example, iPhone 12 Pro is available in black, but iPhone 11 is not. When the page loads on iPhone 12, black is available, but after selecting iPhone 11, the black is still "available" even though there is no inventory. And similar, other colours iPhone 11 is available for don't update as available. Is there a way to fix these so they talk to each other again?
(some swatches are missing, haven't updated those assets yet).
Different themes do it in a different ways, and it may depend on theme settings. And then there are theme mods.
So it's not possible to suggest anything without even knowing your them. Seeing it first-hand will be even better.
It may still be beneficial to show out of stock variants, say if you want to add back in stock notifications, or want your clients see images and pricing for them...
If you want to hide choices for sold-out variants you'd need to turn on/implement linked option code -- see https://community.shopify.com/c/Shopify-Design/Variants-Link-product-options/m-p/615156 And you may need developers' help if your theme does not have it.