refactor double usage of <img> tags for event details component

[thescientist13]

Summary

Coming out of #32 , two <img> tags where used to enable the feature of having the RI map achieve different outcomes for smaller vs larger breakpoints, with usage of positioning since the dotted arrows will go in two different directions based on breakpoint.
https://github.com/AnalogStudiosRI/www.blissfestri.com/blob/main/src/components/event-details/event-details.js

<!-- sm -->
<img src="/assets/images/ri-map.webp" class="hidden sm:block max-w-sm md:max-w-sm lg:max-w-md xl:max-w-md" style="position:absolute; z-index:-1">

...

<!-- xs -->
<img src="/assets/images/ri-map-mobile.webp" class="block sm:hidden pt-2" style="width: 350px"/>

Details

1. In theory this could / should be refactored down into one <img> tag, likely using a secret
2. Ideally all the styling should leverage Tailwind classes (instead of inline style attributes)

[Udassi-Pawan]

Hey @thescientist13,
I would like to work on this issue, would you assign it to me?

[thescientist13]

Thanks @Udassi-Pawan , that would be great! 🙌

[Arindam200]

Is this still open? @thescientist13

Can I work on this?

[thescientist13]

Hey @Arindam200 , I think someone may be working on this one already but feel free to check back in a bit if it's still open.

[Arindam200]

OK

[thescientist13]

@Arindam200
Appreciate your interest in contributing , I'll have a new round of (good first) issues opened by this weekend to build out the rest of the pages for the site. You can checkout #15 to get an idea of what's coming next and would definitely be happy to have any help you can offer! 🙌

( you too @Udassi-Pawan , always appreciate anyone willing to help out :D )