Improve card design

@@ -1,6 +1,6 @@{% load wagtailcore_tags wagtailimages_tags wagtailroutablepage_tags %}<div class="card rounded-0 border-0 border-bottom mb-5"><div class="card rounded-0 border-0 border-bottom h-100">  <div class="mb-3">    {% for tag in blog_post.tags.all %}      <a href="{% routablepageurl blog_post.get_parent.specific 'tag' tag.slug %}" class="btn btn-light btn-sm rounded-pill fw-bold py-0">

@@ -13,12 +13,12 @@    {% image blog_post.cover_image fill-640x480 format-webp class="card-img-top rounded img-fluid" %}  </a>  {% endif %}  <div class="card-body">  <div class="card-body d-flex flex-column">    <a href="{% pageurl blog_post %}" class="text-decoration-none text-dark">      <div class="h5 card-title">{{ blog_post.title }}</div>    </a>    <div class="card-text text-muted">{{ blog_post.search_description }}</div>    <div class="d-flex">    <div class="card-text text-muted flex-grow-1">{{ blog_post.search_description }}</div>    <div class="d-flex mt-3">      <img class="rounded-circle me-3" src="{{ self.owner.wagtail_userprofile.avatar.url }}" alt="{{ self.owner.first_name }} {{ self.owner.last_name }}" width="25" height="25">      <strong class="me-2">{{ blog_post.owner.first_name }} {{ blog_post.owner.last_name }}</strong>      <div class="d-inline text-muted">

@@ -76,7 +76,7 @@ Currently filtered by year {{ active_year }}.      <div class="row">        {% for blog_post in blog_posts %}        {% if blog_post != blog_posts.first %}        <div class="col-12 col-md-6">        <div class="col-sm-12 col-md-6 mb-5">          {% include "includes/blog_post_card.html" %}        </div>        {% endif %}

@@ -96,7 +96,7 @@ Currently filtered by year {{ active_year }}.      </div>      <div class="row">        {% for blog_post in extra_posts %}        <div class="col-12 col-md-6">        <div class="col-12 col-md-6 mb-5">          {% include "includes/blog_post_card.html" %}        </div>        {% endfor %}

@@ -100,9 +100,9 @@      <p>Some posts in similar tags to this one.</p>    </div>  </div>  <div class="row">  <div class="row d-flex flex-nowrap overflow-scroll w-100">    {% for blog_post in related %}    <div class="col-12 col-sm-6 col-md-4">    <div class="col-10 col-sm-7 col-md-5 col-lg-4">      {% include "includes/blog_post_card.html" %}    </div>    {% endfor %}

@@ -52,9 +52,9 @@      <p>If you don't know what you're looking for check out some of my older posts.</p>    </div>  </div>  <div class="row">  <div class="row d-flex flex-nowrap overflow-scroll w-100">    {% for blog_post in random_blog_posts %}    <div class="col-sm-4">    <div class="col-10 col-sm-7 col-md-5 col-lg-4">      {% include "includes/blog_post_card.html" %}    </div>    {% endfor %}

@@ -35,27 +35,8 @@<div class="container mt-5">  <div class="row">    {% for blog_post in results %}    <div class="col-sm-4">      <div class="card rounded-0 border-top-0 border-start-0 border-end-0">        {% if blog_post.cover_image %}        <a href="{% pageurl blog_post %}">          {% image blog_post.cover_image fill-640x480 format-webp class="card-img-top rounded img-fluid" %}        </a>        {% endif %}        <div class="card-body">          <a href="{% pageurl blog_post %}" class="text-decoration-none text-dark">            <h3 class="h5 card-title">{{ blog_post.title }}</h3>          </a>          <p class="card-text text-muted">{{ blog_post.search_description }}</p>          <div class="d-flex">            <img class="rounded-circle me-3" src="{{ self.owner.wagtail_userprofile.avatar.url }}" alt="{{ self.owner.first_name }} {{ self.owner.last_name }}" width="25" height="25">            <strong class="me-2">{{ blog_post.owner.first_name }} {{ blog_post.owner.last_name }}</strong>            <div class="d-inline text-muted">              {{ blog_post.first_published_at|date:"F d, Y" }}            </div>          </div>        </div>      </div>    <div class="col-12 col-sm-6 col-md-4 mb-5">      {% include 'includes/blog_post_card.html' %}    </div>    {% empty %}    {% if request.GET.q %}

@@ -90,7 +71,7 @@      </div>      <div class="row">        {% for blog_post in random_posts %}        <div class="col-12 col-sm-6 col-md-4">        <div class="col-12 col-sm-6 col-md-4 mb-5">          {% include "includes/blog_post_card.html" %}        </div>        {% endfor %}