Make the listevent plugin tableless and responsive

[Heklaterriol]

Now it is:

<table class="table table-hover table-striped">
    <tbody>
        <tr class="listevent event1">
            <td class="eventtitle"><a href="/component/jem/event/2:balkan-beatz">Balkan Beatz</a></td>
            <td class="eventdatetime"><span class="jem_date-1">17.11.2024</span> - <span class="jem_date2">21.11.2024</span></td>
            <td class="eventvenue"><a href="/component/jem/venue/2:kamikaze">Kamikaze</a></td>
            <td><a href="/component/jem/category/2:alternative">Alternative</a></td>
        </tr>
        <tr class="listevent event2">
            <td class="eventtitle"><a href="/component/jem/event/3:electronic-beats">Electronic Beats</a></td>
            <td class="eventdatetime"><span class="jem_date-1">19.11.2024</span> - <span class="jem_date2">22.11.2024</span></td>
            <td class="eventvenue"><a href="/component/jem/venue/1:douala">Douala</a></td>
            <td><a href="/component/jem/category/3:house">House</a></td>
        </tr>
        <tr class="listevent event3">
            <td class="eventtitle"><a href="/component/jem/event/4:rock-punk">Rock Punk</a></td>
            <td class="eventdatetime"><span class="jem_date-1">27.11.2024</span></td>
            <td class="eventvenue"><a href="/component/jem/venue/3:crash">Crash</a></td>
            <td><a href="/component/jem/category/4:rock">Rock</a></td>
        </tr>
    </tbody>
</table>

An it will be:

<div class="events-container">
    <div class="event-item event1">
        <a href="/component/jem/event/2:balkan-beatz">Balkan Beatz</a>
        <div class="event-datetime"><span class="jem_date-1">17.11.2024</span> - <span class="jem_date2">21.11.2024</span></div>
        <a href="/component/jem/venue/2:kamikaze">Kamikaze</a>
        <a href="/component/jem/category/2:alternative">Alternative</a>
    </div>
    <div class="event-item event2">
        <a href="/component/jem/event/3:electronic-beats">Electronic Beats</a>
        <div class="event-datetime"><span class="jem_date-1">19.11.2024</span> - <span class="jem_date2">22.11.2024</span></div>
        <a href="/component/jem/venue/1:douala">Douala</a>
        <a href="/component/jem/category/3:house">House</a>
    </div>
    <div class="event-item event3">
        <a href="/component/jem/event/4:rock-punk">Rock Punk</a>
        <div class="event-datetime">
            <span class="jem_date-1">27.11.2024</span>
        </div>
        <a href="/component/jem/venue/3:crash">Crash</a>
        <a href="/component/jem/category/4:rock">Rock</a>
    </div>
</div>

with CSS similar to

.events-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.event-item {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid #eee;
    align-items: center;
}

/* Responsive Design */
@media (max-width: 768px) {
    .event-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}