From c7f5ea45602acaea6fbbaf7e8ed8acf58fb45997 Mon Sep 17 00:00:00 2001
From: Simon Backx <simon@ghost.org>
Date: Fri, 23 Jun 2023 13:42:14 +0200
Subject: [PATCH] Added CSS changes for signup card picture/img elements
 (#17117)

refs https://github.com/TryGhost/Team/issues/3523

Instead of background images, we now use picture elements (with img
tags).
---
 .../core/frontend/src/cards/css/signup.css    | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/ghost/core/core/frontend/src/cards/css/signup.css b/ghost/core/core/frontend/src/cards/css/signup.css
index c02c4dc6e4..d2c7505444 100644
--- a/ghost/core/core/frontend/src/cards/css/signup.css
+++ b/ghost/core/core/frontend/src/cards/css/signup.css
@@ -1,6 +1,5 @@
 .kg-signup-card {
-    background-size: cover;
-    background-position: center center;
+    position: relative;
 }
 
 .kg-signup-card,
@@ -70,10 +69,23 @@
     z-index: 999;
 }
 
+/* Background image */
+
+.kg-signup-card > picture > .kg-signup-card-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+    background-color: #FFFFFF;
+    pointer-events: none;
+}
 
 /* Split layout image */
 
-.kg-signup-card-image {
+.kg-signup-card-content .kg-signup-card-image {
     /* this will force the image to follow the signup card height */
     height: 0;
     min-height: 100%;
@@ -82,7 +94,7 @@
     object-position: center;
 }
 
-.kg-content-wide .kg-signup-card-image {
+.kg-content-wide .kg-signup-card-content .kg-signup-card-image {
     height: 100%;
     padding: 8rem 0;
     object-fit: contain;
@@ -327,7 +339,7 @@
     .kg-width-wide .kg-signup-card-text {
         padding: 6.4vmax 4vmax;
     }
-    
+
     .kg-layout-split.kg-content-wide .kg-signup-card-text,
     .kg-layout-split.kg-content-wide.kg-swapped .kg-signup-card-text {
         padding: 9.6vmax 0;