How to correctly combine retina, webp and max-width / min-width in the picture tag?

Question

HTML

Greetings!
Actually the essence of the question is conveyed by the description.
I did not find a sensible explanation, so that there was no doubt, how to correctly group all 3 features in the picture tag.
Am I doing the right thing?

<picture>
        <source media="(min-width: 768px)" srcset="assets/images/promo.png 1x, assets/images/promo_2x.png 2x">
        <source media="(min-width: 320px)" srcset="assets/images/promo_sm.png 1x, assets/images/promo_sm_2x.png 2x">
        <source type="image/webp" srcset="assets/images/promo.webp, assets/images/promo.png">
        <source type="image/webp" srcset="assets/images/promo_2x.webp, assets/images/promo_2x.png">
        <source type="image/webp" srcset="assets/images/promo_sm.webp, assets/images/promo_sm.png">
        <source type="image/webp" srcset="assets/images/promo_sm_2x.webp, assets/images/promo_sm_2x.png">
        <img class="promo__img" src="assets/images/promo_sm.png" alt="">
      </picture>