How to configure Nginx for multiple site on the same domain?

I'm really newby in server configuration and I want to serve multiple sites on the same domain like this:

example.com/site1 -> /var/www/example.com/site1/html/
example.com/site2 -> /var/www/example.com/site2/html/  
example.com/site3 -> /var/www/example.com/site3/html/

etc.

My purpose is to make it possible to have totally different sites (site1 on PHP, site2 on python, etc) on the same domain but with different paths.
HTTPS should be enabled for all sites.

I started from one site that uses only statiс for now:

server {
    listen               80;
    listen               [::]:80;
    server_name          example.com www.example.com;
    set                  $base /var/www/example.com;

    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log warn;

    # Open index.html for example.com/site1
    location = /site1 {
        alias            $base/site1/html;
        index            index.html;
        try_files        $uri $uri/ =404;
    }
    
    location /site1/ {
        alias            $base/site1/html/;
        index            index.html;
        try_files        $uri $uri/ =404;

        access_log       /var/log/nginx/example.com/site1/access.log;
        error_log        /var/log/nginx/example.com/site1/error.log warn;
    }
}

But even with this simple config, I have some problems:

1. For some reason it works over HTTPS without SSL configuration but when I enable it I have 502 for any request.
2. https://example.com/site1 redirects to http://example.com/site1/ and then redirects to https://example.com/site1/, but I don't want it. I don't want trailing slashes at all.
3. I have no ideas how to load static from the frontend without using absolute URLs. E.g. if I'm on site1 then request /css/styles.css should actually go to https://example.com/site1/css/styles.css.

Thanks a lot for any help!