diff --git a/styles.css b/styles.css
index ec7a4130..00b756a8 100644
--- a/styles.css
+++ b/styles.css
@@ -87,9 +87,11 @@
 }
 
 .format-grid .thegrid .grid-image .grid-badge-middle {
+    bottom: 0;
     left: 0;
     position: absolute;
     right: 0;
+    top: 0;
 }
 
 .format-grid .thegrid .grid-image .grid-badge-bottom {
diff --git a/templates/grid.mustache b/templates/grid.mustache
index 871e0a91..46f8b024 100644
--- a/templates/grid.mustache
+++ b/templates/grid.mustache
@@ -106,7 +106,7 @@
                 <div class="grid-image text-center">
                     <img{{#imageresizemethodcrop}} class="card-img-bottom{{^sectiontitleingridbox}} card-img-top{{/sectiontitleingridbox}}"{{/imageresizemethodcrop}} src="{{imageuri}}" alt="{{imagealttext}}" loading="lazy">
                     {{^sectiontitleingridbox}}{{#sectionbadgeingridbox}}{{#hasbadge}}
-                    <div data-region="sectionbadges" class="sectionbadges d-flex {{^sectioncompletionmarkup}}justify-content-center{{/sectioncompletionmarkup}}{{#sectioncompletionmarkup}}ml-2{{/sectioncompletionmarkup}} align-items-end grid-badge-bottom">
+                    <div data-region="sectionbadges" class="sectionbadges d-flex {{^sectioncompletionmarkup}}justify-content-center align-items-center grid-badge-middle{{/sectioncompletionmarkup}}{{#sectioncompletionmarkup}}ml-2 align-items-end grid-badge-bottom{{/sectioncompletionmarkup}}">
                         {{$ core_courseformat/local/content/section/badges }}
                             {{> core_courseformat/local/content/section/badges }}
                         {{/ core_courseformat/local/content/section/badges }}