From f8cc5edea4fccfaabd9d058017314fb43fa03686 Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Sun, 23 Feb 2025 19:38:21 +0100
Subject: [PATCH] [web] Fix hero page alignment of image

---
 web-src/src/templates/ContentWithHero.vue | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/web-src/src/templates/ContentWithHero.vue b/web-src/src/templates/ContentWithHero.vue
index f84071d6..c6893180 100644
--- a/web-src/src/templates/ContentWithHero.vue
+++ b/web-src/src/templates/ContentWithHero.vue
@@ -4,7 +4,7 @@
       <div class="columns is-centered">
         <div class="column is-four-fifths">
           <div class="columns is-flex-direction-row-reverse">
-            <div class="column">
+            <div class="column is-flex has-image">
               <slot name="heading-right" />
             </div>
             <div class="column m-auto is-three-fifths has-text-centered-mobile">
@@ -32,3 +32,18 @@ export default {
   name: 'ContentWithHero'
 }
 </script>
+
+<style lang="scss" scoped>
+@use 'bulma/sass/utilities/mixins';
+
+.column {
+  &.has-image {
+    @include mixins.mobile {
+      justify-content: center;
+    }
+    @include mixins.tablet {
+      justify-content: right;
+    }
+  }
+}
+</style>