diff --git a/src/media/css/template.css b/src/media/css/template.css
index 7b5da4f..e3eeb4c 100644
--- a/src/media/css/template.css
+++ b/src/media/css/template.css
@@ -13927,6 +13927,11 @@ meter {
 
 /* ── HERO CARD BASE ── */
 .hero {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	min-height: var(--banner-min-height, 60vh);
 	max-width: var(--hero-card-max-width, 600px);
 	padding: var(--hero-card-padding-y, 3rem) var(--hero-card-padding-x, 2rem);
 	background-color: var(--hero-card-bg, var(--hero-primary-bg-color, #0d1e3a));
@@ -13937,6 +13942,12 @@ meter {
 	border-radius: var(--hero-card-border-radius, .5rem);
 }
 
+.hero .card {
+	margin-left: auto;
+	margin-right: auto;
+	text-align: center;
+}
+
 /* ── PRIMARY VARIANT (uses default card vars) ── */
 .hero#primary {
 	background-color: var(--hero-card-bg, #0d1e3a);