Responsive images of srcset attribute are not working as expected

I'm fixing some code in a review web application project. one of the submission criteria is to make all of the site images responsive using srcset attribute. But the site is only loading the larger image in all viewports and screen sizes and I don't know where I went wrong!!

Here's the HTML portion in with the target img tag, which is being built dynamically with the javascript afterward

<section id="restaurant-container">
    <h1 id="restaurant-name"></h1>
    <img id="restaurant-img">
    <p id="restaurant-cuisine"></p>
    <p id="restaurant-address"></p>
    <table id="restaurant-hours"></table>
</section>

JS

function imageUrlForRestaurant(restaurant) {
    let url = `/img/${(restaurant.photograph.split('.')[0]||restaurant.id)}-medium.jpg`;
    return url;
  }

function imageSrcsetForRestaurant(restaurant) {
    const imageSrc = `/img/${(restaurant.photograph.split('.')[0]||restaurant.id)}`;
    return `${imageSrc}-small.jpeg 300w,
            ${imageSrc}-medium.jpeg 600w,
            ${imageSrc}-large.jpeg 800w`;
  }

function imageSizesForRestaurant(restaurant) {
    return `(max-width: 360px) 280px,
            (max-width: 600px) 600px,
            400px`;
  }


const image = document.getElementById('restaurant-img');
image.className = 'restaurant-img';
image.src = imageUrlForRestaurant(restaurant);
image.srcset = imageSrcsetForRestaurant(restaurant);
image.sizes = imageSizesForRestaurant(restaurant);