Expanding future-events template to display as panels instead of <ul>

This is my first post here and I am trying to follow all the tips for how to make a post to try to resolve my issue.

What I am trying to do

I am working on an implementation of the “future-events” template here:
https://gohugo.io/templates/introduction/#example-show-future-events

However, I would like the events to display as panels instead of a <ul> list, similar to the way the Articles show up here:
https://gohugo-ananke-theme-demo.netlify.app/post/

What I have tried

Using that Articles page, I tried making this my future-events.html file:

<h2>Future Events</h2>

  <article class="pa3 pa4-ns nested-copy-line-height">
  {{ range where site.RegularPages "Type" "events" }}
 {{ if gt (.Params.start_date | time.AsTime) now }}
      {{ $startDate := .Params.start_date | time.Format ":date_medium" }}
      

<aside class="flex-ns flex-wrap justify-around mt5">

<div class="relative w-100 w-30-l mb4 bg-white">
  <div class="mb3 pa4 mid-gray overflow-hidden">
    <div class="f6">
    {{ $startDate }}
    </div>
    <h1 class="f3 near-black">
      <a href="{{ .RelPermalink }}" class="link black dim">  {{ .LinkTitle }}  </a>
    </h1>
    <div class="nested-links f5 lh-copy nested-copy-line-height">
      {{ $startDate }}
    </div>
  </div>
</div>
      
    {{ end }}

  {{ end }}
</ul>

The issue

The alignment is off and I’m wondering if there is a more concise way to accomplish this than what I’ve written above

Hello, can I understand why this is off-topic for the templates category?

I don’t know if it’s off-topic. But I do know that from what you posted here, it is near impossible to help you. I suggest that you post a link to your repository. And maybe use some cleaner code – all these class names in your divs do not help to understand what is going on. Particularly if nobody can know what the class names mean.

This seems to be about HTML and CSS, and not about Hugo. If you feel strongly about it, change the tag.