Art Gallery solution using responsive, leafletjs and many css tricks

The Art Gallery homepage provided several challenges that didn't seem "junior":

• the white/black text on the desktop hero section requires much CSS trickery involving duplicating the text, calc() offsets and clip-path: inset().
• the map is using the LeafletJS library as suggested. The grayscale appearance required !important to override a leaflet CSS class with greater specificity.
• the map custom marker was exported as svg from the Figma design and then incorporated inline in the javascript to render on the map.
• the map defaults to using jestures for zoom on mac and ios. This makes the location page not easily scrollable. I changed the options to disallow two finger zoom in order to make scrolling the default.
• responsive layout was complicated by the design choices that led to reordering and refactoring html.
• accessibility was tested with keyboard and voiceover on mac. The hero title caused some surprises here when the screen reader read the title twice. This led to using aria-hidden on the white/black styled heading and including a visually-hidden h1 specifically for the screen reader.