Change header image from desktop to mobile

I solved it! I make the cover Gutenberg box react as a featured image and then put the below code:

@media only screen and (max-width: 960px) {

.headerImage {



        background-image: url('/wp-content/uploads/2023/10/w_coat_002b.jpg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;

}

}

@media only screen and (min-width: 960px) {

    .headerImage {


        background-image: url('/wp-content/uploads/2023/10/header_image_AW_2324-1.jpg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
}

}

Thanks!