From a61cf3d47d796b0ef94c3d2089445702370c6732 Mon Sep 17 00:00:00 2001
From: Brian Kardell <bkardell@gmail.com>
Date: Wed, 15 Nov 2023 12:37:44 -0500
Subject: [PATCH 1/4] add simplest soltion for use case/success/carousel

---
 index.html | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/index.html b/index.html
index fc31c8004..c9d92f948 100644
--- a/index.html
+++ b/index.html
@@ -324,6 +324,7 @@ <h3><a href="/about/a-good-choice.html">Why Choose WPE?</a></h3>
 
 
 <section class="success-stories full-width dotsep">
+
 <div>
 <div class="spotlight">
 <h2>Use Case</h2>
@@ -332,7 +333,15 @@ <h3><a href="/blog/2023-success-digital-signage.html">Digital Signage</a></h3>
 <p><a href="/blog/2023-success-digital-signage.html" class="cta btn large">Learn More</a></p>
 </div>
 <img src="/assets/img/use_case-digital_signage.png" alt="">
+</div><div>
+<img src="/assets/img/Metrological-hero.jpg" alt="" class="hero" style="max-width: 761px;">
+<div class="spotlight"><h2>Success Story</h2>
+
+<h3><a href="/blog/2022-success-metrological.html"><img src="/assets/img/logo-metrological@2x.png" alt="Metrological"></a></h3>
+<p>WPE WebKit brought RDK, a modern, performant web browser, to millions of screens. It enables operators to manage devices and easily customize their UIs and apps and provides analytics to improve the customer experience and drive business results.</p>
+<p><a href="/blog/2022-success-metrological.html" class="cta btn large">Read Success Story</a></p></div>
 </div>
+
 </section>
 
 

From e9bc6985ab58ab34b78e0a22a5c48f5e52122b12 Mon Sep 17 00:00:00 2001
From: "Eric A. Meyer" <eric@meyerweb.com>
Date: Thu, 16 Nov 2023 13:08:06 -0500
Subject: [PATCH 2/4] Tweaks to .success-stories styling

---
 index.html | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index c9d92f948..02f6d77c9 100644
--- a/index.html
+++ b/index.html
@@ -168,6 +168,10 @@
 	padding: 0.75em 0;
 	font-size: 1.4em;
 }
+.success-stories h3 {
+	font-size: 1.33em;
+	margin-block-start: 0;
+}
 .success-stories h3 a {
   font-size: 3em;
   color: inherit;
@@ -193,8 +197,8 @@
 		padding: 0;
 	}
 	.success-stories img.hero {
-		height: 100%;
-		max-width: none;
+		max-width: 100%;
+		height: auto;
 		max-height: 30rem;
 		margin-inline-start: -5rem;
 		box-shadow: -0.25em 0 0.5em #06C3, 1em 1.5em 2.5em #0066DD99;
@@ -334,7 +338,7 @@ <h3><a href="/blog/2023-success-digital-signage.html">Digital Signage</a></h3>
 </div>
 <img src="/assets/img/use_case-digital_signage.png" alt="">
 </div><div>
-<img src="/assets/img/Metrological-hero.jpg" alt="" class="hero" style="max-width: 761px;">
+<img src="/assets/img/Metrological-hero.jpg" alt="" class="hero">
 <div class="spotlight"><h2>Success Story</h2>
 
 <h3><a href="/blog/2022-success-metrological.html"><img src="/assets/img/logo-metrological@2x.png" alt="Metrological"></a></h3>

From 555882b750d39ea3cd893bb2204c95429436362c Mon Sep 17 00:00:00 2001
From: "Eric A. Meyer" <eric@meyerweb.com>
Date: Thu, 16 Nov 2023 14:15:19 -0500
Subject: [PATCH 3/4] Breakpoint tweaking

---
 index.html | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 02f6d77c9..d87c76fcf 100644
--- a/index.html
+++ b/index.html
@@ -183,6 +183,12 @@
 	object-fit: cover;
 	object-position: 50% 50%;
 }
+.success-stories div + img {
+	max-height: 20rem;
+	display: block;
+	margin-inline: auto;
+}
+
 @media (min-width: 45rem) {
 	.success-stories > div {
 		grid-column: main / -2;
@@ -196,6 +202,10 @@
 		margin: 0;
 		padding: 0;
 	}
+	.success-stories div + img {
+		max-height: 100%;
+		margin-inline: 0;
+	}
 	.success-stories img.hero {
 		max-width: 100%;
 		height: auto;
@@ -337,10 +347,10 @@ <h3><a href="/blog/2023-success-digital-signage.html">Digital Signage</a></h3>
 <p><a href="/blog/2023-success-digital-signage.html" class="cta btn large">Learn More</a></p>
 </div>
 <img src="/assets/img/use_case-digital_signage.png" alt="">
-</div><div>
+</div>
+<div>
 <img src="/assets/img/Metrological-hero.jpg" alt="" class="hero">
 <div class="spotlight"><h2>Success Story</h2>
-
 <h3><a href="/blog/2022-success-metrological.html"><img src="/assets/img/logo-metrological@2x.png" alt="Metrological"></a></h3>
 <p>WPE WebKit brought RDK, a modern, performant web browser, to millions of screens. It enables operators to manage devices and easily customize their UIs and apps and provides analytics to improve the customer experience and drive business results.</p>
 <p><a href="/blog/2022-success-metrological.html" class="cta btn large">Read Success Story</a></p></div>

From e97a6b28d9dfd66e9645534e2dfd63c802fac7b7 Mon Sep 17 00:00:00 2001
From: "Eric A. Meyer" <eric@meyerweb.com>
Date: Mon, 20 Nov 2023 12:06:51 -0500
Subject: [PATCH 4/4] Swapped order of the success stories

---
 index.html | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index d87c76fcf..b778a690e 100644
--- a/index.html
+++ b/index.html
@@ -339,6 +339,15 @@ <h3><a href="/about/a-good-choice.html">Why Choose WPE?</a></h3>
 
 <section class="success-stories full-width dotsep">
 
+<div>
+<img src="/assets/img/Metrological-hero.jpg" alt="" class="hero">
+<div class="spotlight"><h2>Success Story</h2>
+<h3><a href="/blog/2022-success-metrological.html"><img src="/assets/img/logo-metrological@2x.png" alt="Metrological"></a></h3>
+<p>WPE WebKit brought RDK, a modern, performant web browser, to millions of screens. It enables operators to manage devices and easily customize their UIs and apps and provides analytics to improve the customer experience and drive business results.</p>
+<p><a href="/blog/2022-success-metrological.html" class="cta btn large">Read Success Story</a></p>
+</div>
+</div>
+
 <div>
 <div class="spotlight">
 <h2>Use Case</h2>
@@ -348,13 +357,6 @@ <h3><a href="/blog/2023-success-digital-signage.html">Digital Signage</a></h3>
 </div>
 <img src="/assets/img/use_case-digital_signage.png" alt="">
 </div>
-<div>
-<img src="/assets/img/Metrological-hero.jpg" alt="" class="hero">
-<div class="spotlight"><h2>Success Story</h2>
-<h3><a href="/blog/2022-success-metrological.html"><img src="/assets/img/logo-metrological@2x.png" alt="Metrological"></a></h3>
-<p>WPE WebKit brought RDK, a modern, performant web browser, to millions of screens. It enables operators to manage devices and easily customize their UIs and apps and provides analytics to improve the customer experience and drive business results.</p>
-<p><a href="/blog/2022-success-metrological.html" class="cta btn large">Read Success Story</a></p></div>
-</div>
 
 </section>