Image map issues

Site URL: https://www.catherineadams.org

Hi 

I'm obviously doing something wrong..! Help!

I'm attempting to image map (add separate links to areas of an image) and I don't seem to be having much luck.
All I seem to be able to do after following the Squarespace instruction video on adding custom CSS, is add a code block above/next to/over the image showing the CSS with a little broken image icon at the end of it rather than creating the image (with map) itself.
Please help! And PLEASE use VERY basic instructions; I'm not a programmer and my eyes hurt from all this coding 😞
Here's the (evidently totally incorrect!) code I have:

https://static1.squarespace.com/static/60e77a85a4f8165005f21dc1/t/634acf3e61ae092c4960b772/1665847115924/Corkboard+With+3DMpic+n+poster+and+TriggeredWBPosterTrans.pngP(column-count: 3; column-gap; 5%)

<img src="Corkboard With 3DMpic n poster and TriggeredWBPosterTrans.png" usemap="#image-map">

<map name="image-map">

    <area target="_blank" alt="BUY TICKETS" title="BUY TICKETS" href="https://www.catherineadams.org/events-2" coords="1029,666,1823,1800" shape="rect">

    <area target="_blank" alt="Three Day Millionaire" title="Three Day Millionaire" href="https://www.imdb.com/title/tt11675788/" coords="1264,338,533,611" shape="rect">

    <area target="_blank" alt="Smile!" title="Smile!" href="https://www.youtube.com/watch?v=kyLIMkAX8f0&amp;amp;ab_channel=CatherineAdams" coords="1829,921,2217,1244" shape="rect">

    <area target="_blank" alt="Three Day Millionaire" title="Three Day Millionaire" href="https://www.imdb.com/title/tt11675788/" coords="43,1233,987,613" shape="rect">

</map>