responsive wordpress images only in services not in single services

i have 1 post types with the service names :

site.com/services/ : it is in the form of 3 columns : i have 5 sizes 365x206 and 487x274 and 728x410 and 985x555 and 1118x629 in scale

site.com/services/service-name/ : it is in the form of 1 column without sidebar and full width

i want to use sizes on the service page that are different from the single service page sizes, to do this, i used the following code :

function content_image_sizes_attr($sizes, $size) {
    if( get_post_type() === 'services' && ! is_singular() ) {
        return '
        (max-width: 365px) 365px, 
        (max-width: 487px) 487px, 
        (max-width: 767px) 728px, 
        (max-width: 1024px) 487px,
        (min-width: 1025px) 365px';
    }
} add_filter( 'wp_calculate_image_sizes', 'content_image_sizes_attr', 10 , 2 );

the above code says to apply responsive images only on the service page and not on a single service page, but this code does not work and shows the original size image on the service and single service page, while i want to apply only on the service page, not the single service page

i hope you will guide me

Try to call inside wp_head action -

add_action('wp_head', 'check_post_type');

function check_post_type(){
    if( get_post_type() === 'services' && ! is_singular() ) {
        // echo "hello";
        add_filter( 'wp_calculate_image_sizes', 'content_image_sizes_attr', 10 , 2 );
    }
}

function content_image_sizes_attr($sizes, $size) {
    return '
    (max-width: 365px) 365px, 
    (max-width: 487px) 487px, 
    (max-width: 767px) 728px, 
    (max-width: 1024px) 487px,
    (min-width: 1025px) 365px';
}