Editing Code Best Practice

[ludi]

I'm about to modify the code for the Dawn theme and would like advice on the correct approach.

Link to quickly drafted preview site: Charlie The Vet (charlie-the-vet.myshopify.com)

Mockup of the design I want to create:

PROBLEMS WITH PREVIEW SITE

section: header
main menu font size is wrong

section: image banner
banner image section won't work with my design.
need css rules to load different html/css for different screen widths
need way to upload multiple images to load for those different widths.

section: image-with-text
cat image stretched half page width
need new HTML/CSS

section: featured product
product image stretched
where can I find correct product image dimensions?

global
font is wrong font
need to upload a new font to be used site-wide (think I know how to do this)

QUESTIONS
If I create a new liquid section in the code editor (e.g image-banner-mycustomsite.liquid) how do I make that section appear in the theme editor, so I can add it to a page?

How can I edit the settings that appear in the theme editor for that new section?
(e.g. for 'image-banner-mycustomsite.liquid' I would want to be able to upload 4 or more images, not 2).

Is there a way to upload images that can be used globally rather than within a specific section?

Where I'm creating new .css rules, presumably I should create a new .css file in the assets folder, rather than modify an existing one.
How do I make sure it is included on page load?

Where can I find documentation section.settings used in liquid templates e.g this line
"{{ section.settings.image | img_url: '1500x' }}
outputs a path to image with 1500 appended:
cdn.shopify.com/s/files/1/0605/1069/9751/files/catupleft_1500x.png?v=1634468695