Recents on main page for multiple categories

[ItsMly]

Hi @jpanther and community,

i would like to have the main page showing the last 3 posts of two categories I have. Like this

Any way to make it aesthetically pleasing?😂 Tried my best with the help of ChatGPT - any help would be appreciated. :)

recent-articles.html

{{ if .Site.Params.homepage.showRecent | default false }}
<h2 class="mt-8 text-2xl font-extrabold">
  {{ i18n "shortcode.recent_articles" | emojify }}
</h2>

<div class="recent-posts-container">
  <!-- Left Column -->
  <div class="recent-posts-column">
    <a href="{{ site.BaseURL }}posts" class="column-title-link">
      <h3 class="column-title">Everything M365/Azure</h3>
    </a>
    {{ $recentPosts := first 3 (where .Site.RegularPages "Type" "posts") }} {{
    range $recentPosts }}
    <div class="recent-post-item">{{ partial "article-link.html" . }}</div>
    {{ end }}
  </div>

  <!-- Right Column -->
  <div class="recent-posts-column">
    <a href="{{ site.BaseURL }}various" class="column-title-link">
      <h3 class="column-title">Various / Misc</h3>
    </a>
    {{ $recentVarious := first 3 (where .Site.RegularPages "Type" "various") }}
    {{ range $recentVarious }}
    <div class="recent-post-item">{{ partial "article-link.html" . }}</div>
    {{ end }}
  </div>
</div>
{{ end }}

custom.css

.column-title {
  font-size: 1.25rem;
  margin-bottom: 8px;
  text-align: center; /* Center-align the column titles horizontally */
}

.recent-post-item {
  display: flex; /* Flexbox layout for alignment */
  flex-direction: column; /* Ensures content stacks vertically */
  justify-content: center; /* Center content vertically */
  align-items: center; /* Center content horizontally */
  height: 160px; /* Set a fixed height for all items */
  overflow: hidden; /* Ensures that long content doesn't overflow */
  padding: 8px; /* Add some padding for better readability */
  margin-bottom: 5px; /* Space between items */
  background-color: #3e3b3b; /* Optional: Add a subtle background color */
  border-radius: 12px; /* Optional: Add rounded corners */
}

.flex.items-center.text-xl.font-semibold {
  margin-top: 0px; /* Apply negative margin to reduce spacing above */
  margin-bottom: 0px; /* Apply negative margin to reduce spacing below */
  width: 110%;
}

/* Optional Responsive Design for Smaller Screens */
@media (max-width: 768px) {
  .recent-posts-container {
    flex-direction: column; /* Stack columns vertically on smaller screens */
    gap: 24px;
  }

  .recent-posts-column {
    max-width: unset; /* Allow full width for stacked layout */
    width: auto;
    margin-left: 0; /* Remove left margin for stacked layout */
  }

  .recent-post-item {
    height: auto; /* Allow dynamic height on smaller screens */
    padding: 6px;
    margin-bottom: 8px;
  }
}
.column-title-link {
  text-decoration: none; /* Remove underline by default */
  color: #ffffff; /* Set default link color */
}

.column-title-link:hover {
  text-decoration: underline; /* Add underline on hover */
  color: #d18306; /* Optional: Change color on hover */
}