Custom site, mobile not responsive

CSS shows the following. What code do I need to include to make mobile view responsive for my footer image? Where do I add the code?

Thank you in advance for any help you can provide.

footer {
    color: #fff;
    padding: 0px 0 40px 0px;
    font-size: 0.875rem;
    border-top: 1px solid transparent;
    margin-top: 0px;
    clear: both;
    background: rgba(34, 60, 93, 1);
    background-image: url('/wp-content/uploads/2023/03/PhotoJerusalemwithCrossForeground-Resized.png'), -moz-linear-gradient(top, rgba(34, 60, 93, 1) 0%, rgba(99, 126, 153, 1) 100%);
    background-image: url('/wp-content/uploads/2023/03/PhotoJerusalemwithCrossForeground-Resized.png'), -webkit-gradient(left top, left bottom, color-stop(0%, rgba(34, 60, 93, 1)), color-stop(100%, rgba(99, 126, 153, 1)));
    background-image: url('/wp-content/uploads/2023/03/PhotoJerusalemwithCrossForeground-Resized.png'), -webkit-linear-gradient(top, rgba(34, 60, 93, 1) 0%, rgba(99, 126, 153, 1) 100%);
    background-image: url('/wp-content/uploads/2023/03/PhotoJerusalemwithCrossForeground-Resized.png'), -o-linear-gradient(top, rgba(34, 60, 93, 1) 0%, rgba(99, 126, 153, 1) 100%);
    background-image: url('/wp-content/uploads/2023/03/PhotoJerusalemwithCrossForeground-Resized.png'), -ms-linear-gradient(top, rgba(34, 60, 93, 1) 0%, rgba(99, 126, 153, 1) 100%);
    background-image: url('/wp-content/uploads/2023/03/PhotoJerusalemwithCrossForeground-Resized.png'), linear-gradient(to bottom, rgba(34, 60, 93, 1) 0%, rgba(99, 126, 153, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#223c5d', endColorstr='#637e99', GradientType=0);
    background-image: url('/wp-content/uploads/2023/03/PhotoJerusalemwithCrossForeground-Resized.png'), linear-gradient(to bottom, rgba(34, 60, 93, 1) 0%, rgba(99, 126, 153, 1) 100%);
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat;
}

The page I need help with: [log in to see the link]