How to adjust hero image size for optimal responsiveness on Refresh theme?

you need to add different image setting for mobile image


css:
@media screen and (min-width: 750px){
.destop-hide{display:none;}}//add this class for desktop image div
@media screen and (max-width: 749px){
.mobile-hide{display:none;}}//add this class for mobile image div
in schema :
{ "type": "image_picker", "id": "mob-image", "label": "mobile Image" }
<div class="destop-hide"><img src="{{ section.settings.mob-image" }}"></div>