From d1e56ff72b83fc7dfab7be663c8a9bd1303ef0b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A1n?= <41774881+xentenza@users.noreply.github.com>
Date: Fri, 4 Oct 2024 08:47:20 +0200
Subject: [PATCH 1/2] Additional image alignment classes in Organisms/Hero

Additional classes for WEBEVOL-253
---
 assets/components/organisms/hero/hero.scss | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/assets/components/organisms/hero/hero.scss b/assets/components/organisms/hero/hero.scss
index cec6ba1a..22fa16a6 100644
--- a/assets/components/organisms/hero/hero.scss
+++ b/assets/components/organisms/hero/hero.scss
@@ -75,6 +75,14 @@
     height: 100%;
   }
 
+  img.top-center {
+    object-position: top center;
+  }
+
+  img.bottom-center {
+    object-position: bottom center;
+  }
+
   @include media-breakpoint-up(xxl) {
     picture {
       height: 80vh;

From 998c1c860c759603689c06ca6fc56853b88c040d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A1n?= <41774881+xentenza@users.noreply.github.com>
Date: Mon, 21 Oct 2024 09:37:21 +0200
Subject: [PATCH 2/2] Added documentation

Added information about using the two new .top-center and .bottom-center classes
---
 assets/components/organisms/hero/hero.yml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/assets/components/organisms/hero/hero.yml b/assets/components/organisms/hero/hero.yml
index fe3f52a6..9ce23d32 100644
--- a/assets/components/organisms/hero/hero.yml
+++ b/assets/components/organisms/hero/hero.yml
@@ -3,6 +3,8 @@ title: Hero
 notes: |
   The hero component is used as intro to basic pages.
 
+  You can add the `.top-center` class to the `<img>` tag if you want the background picture to be centred from the top of the image, or the `bottom-center` class to the `<img>` tag if you want the background picture to be centred from the bottom of the image.
+
 variants:
   - name: legend
     title: Hero with image legend