Tornar imagem de banner tema Dawn do Shopify ajustada a todos os tipos de Desktops e mobiles

Olá freelancer,
Estou a desenvolver uma loja online no shopify e estou a utilizar o tema Dawn. Para que eu possa ter uma imagem no desktop e outra no mobile segui a sugestão que encontrei em um video no youtube e no final da página de código "section-image-banner.css" coloquei o seguinte código :
.banner__media:first-child {
    width: 100%;
}
.banner__media+.banner__media {
    display: none;
}
@media screen and (max-width: 749px) {
    .banner__media:first-child {
        display: none;
    }
    .banner__media+.banner__media {
        width: 100%;
        display: block !important;
    }
}
@media screen and (max-width: 749px) {
    .banner__content::before{
        padding-bottom: 150% !important;
    }
}
Efetivamente isto resultou, quando se usa o mobile tenho uma imagem, quando uso o desktop tenho outra, porém, apesar de no meu mobile e desktop as imagens aparecerem corretamente, em outros telemóveis a imagem não cabe no ecrã ou aparece desfocada. Eu preciso que as imagens do banner se adaptem a qualquer dispositivo móvel e desktop. Como no exemplo deste site https://justlyne.com/, onde podemos verificar que a imagem para além de estar focada também se ajusta perfeitamente a qualquer dispositivo móvel.

Estou disposto a dar mais informações em privado.
É Um trabalho simples para quem é entendido na matéria. Procuro alguém que me consiga ajudar neste pequeno problema e posso garantir que, se correr tudo bem, maiores projectos irei apresentar a essa pessoa.
Aguardo pelas vossas propostas,
Cumprimentos,
Ruben