Events: Add event icon beside date of cards

[wei2912]

The above screenshots show that the responsive event cards from https://github.com/AdvisorySG/ghost-advisory-theme/pull/185, which looks kinda empty. @yufang2802 has suggested adding an event icon to the event card (which will need to be done on the desktop layout too, for consistency).

[wei2912]

Chime will be taking up this task.

[papermelon]

<div class="w-full max-w-screen-xl mx-auto my-0">
    <h2 class="text-center m-4">
        Upcoming Events
    </h2>
    <div>
        <p class="justify-start mb-3">Loading...</p>
    </div>
    <div class="grid grid-cols-1 gap-x-10 gap-y-6 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-16 m-auto break-words sm:break-normal" id="event-card-container sm">
        <article class="box-border w-full border-2 border-gray-400 rounded-md p-3 overflow-hidden shadow-md event-card hover:border-yellow-500">
            <div class="grid grid-cols-2">
                <div>
                    <p class="flex items-center">
                        <span class="text-yellow-500 font-semibold text-3xl event-date-day">26 Mar</span>
                    </p>
                    <p class="text-gray-600 text-l event-date-month">7.30pm-9pm</p>
                </div>
                <div>
                    <i class="fas fa-calendar-alt text-gray-500 text-2xl flex justify-end mt-1 mr-2"></i>
                </div>
                <div class="mt-5 my-2.5">
                    <p class="text-gray-600 font-semibold text-3xl">Discover+:</p>
                    <p class="text-gray-600 font-semibold text-xl">Technology</p>
                </div>
            </div>
        </article>
        <article class="box-border w-full border-2 border-gray-400 rounded-md p-3 overflow-hidden shadow-md event-card hover:border-yellow-500">
            <div class="grid grid-cols-2">
                <div>
                    <p class="flex items-center">
                        <span class="text-yellow-500 font-semibold text-3xl event-date-day">24 Apr</span>
                    </p>
                    <p class="text-gray-600 text-l event-date-month">7.30pm-9pm</p>
                </div>
                <div>
                    <i class="fas fa-calendar-alt text-gray-500 text-2xl flex justify-end mt-1 mr-2"></i>
                </div>
                <div class="mt-5 my-2.5">
                    <p class="text-gray-600 font-semibold text-3xl">Discover+:</p>
                    <p class="text-gray-600 font-semibold text-xl">Healthcare</p>
                </div>
            </div>
        </article>
    </div>
</div>

[wei2912]

This issue should be worked on after https://github.com/AdvisorySG/ghost-advisory-theme/issues/283.