From ec78f7c48997621b6230ec457f9483d38be89de9 Mon Sep 17 00:00:00 2001
From: Alistair Lane <alistair.lane@shopify.com>
Date: Thu, 2 Jun 2022 11:05:45 -0400
Subject: [PATCH 1/8] Card image style

Have card images inherit styles from media.
---
 assets/section-multicolumn.css | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/assets/section-multicolumn.css b/assets/section-multicolumn.css
index 3b736292424..ce742f054f3 100644
--- a/assets/section-multicolumn.css
+++ b/assets/section-multicolumn.css
@@ -221,6 +221,15 @@
   white-space: nowrap;
 }
 
+.multicolumn-card__image {
+  border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity));
+  border-radius: var(--media-radius);
+  box-shadow: var(--media-shadow-horizontal-offset)
+    var(--media-shadow-vertical-offset)
+    var(--media-shadow-blur-radius)
+    rgba(var(--color-shadow), var(--media-shadow-opacity));
+}
+
 @media screen and (min-width: 990px) {
   .multicolumn-list__item--empty {
     display: list-item;

From 66d88da203c6a4b2e60a6ad7ce4c02f44c718d9a Mon Sep 17 00:00:00 2001
From: Alistair Lane <alistair.lane@shopify.com>
Date: Thu, 2 Jun 2022 11:41:22 -0400
Subject: [PATCH 2/8] 50% border radius for circle images

---
 assets/section-multicolumn.css | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/assets/section-multicolumn.css b/assets/section-multicolumn.css
index ce742f054f3..e10895bd78c 100644
--- a/assets/section-multicolumn.css
+++ b/assets/section-multicolumn.css
@@ -200,6 +200,19 @@
   box-sizing: border-box;
 }
 
+.multicolumn-card__image {
+  border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity));
+  border-radius: var(--media-radius);
+  box-shadow: var(--media-shadow-horizontal-offset)
+    var(--media-shadow-vertical-offset)
+    var(--media-shadow-blur-radius)
+    rgba(var(--color-shadow), var(--media-shadow-opacity));
+}
+
+.media--circle .multicolumn-card__image {
+  border-radius: 50%;
+}
+
 .multicolumn-card > .multicolumn-card__image-wrapper--full-width:not(.multicolumn-card-spacing) {
   border-top-left-radius: calc(var(--text-boxes-radius) - var(--text-boxes-border-width));
   border-top-right-radius: calc(var(--text-boxes-radius) - var(--text-boxes-border-width));
@@ -221,15 +234,6 @@
   white-space: nowrap;
 }
 
-.multicolumn-card__image {
-  border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity));
-  border-radius: var(--media-radius);
-  box-shadow: var(--media-shadow-horizontal-offset)
-    var(--media-shadow-vertical-offset)
-    var(--media-shadow-blur-radius)
-    rgba(var(--color-shadow), var(--media-shadow-opacity));
-}
-
 @media screen and (min-width: 990px) {
   .multicolumn-list__item--empty {
     display: list-item;

From e2d0cbc0827b5ddc77c646d20192607324f0207d Mon Sep 17 00:00:00 2001
From: Alistair Lane <alistair.lane@shopify.com>
Date: Mon, 13 Jun 2022 15:23:24 -0400
Subject: [PATCH 3/8] Make borders work for circles

---
 assets/base.css                | 3 ++-
 assets/section-multicolumn.css | 7 +++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/assets/base.css b/assets/base.css
index 4cf252661d8..31dd6e603cb 100644
--- a/assets/base.css
+++ b/assets/base.css
@@ -1241,7 +1241,8 @@ summary::-webkit-details-marker {
 }
 
 .media--circle {
-  padding-bottom: 100%;
+  left: calc(-1 * var(--button-size));
+  padding-bottom: calc(100% - var(--media-border-width) * 2);
   border-radius: 50%;
 }
 
diff --git a/assets/section-multicolumn.css b/assets/section-multicolumn.css
index e10895bd78c..3b3a941cb8b 100644
--- a/assets/section-multicolumn.css
+++ b/assets/section-multicolumn.css
@@ -200,7 +200,7 @@
   box-sizing: border-box;
 }
 
-.multicolumn-card__image {
+.multicolumn-card .media {
   border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity));
   border-radius: var(--media-radius);
   box-shadow: var(--media-shadow-horizontal-offset)
@@ -209,6 +209,10 @@
     rgba(var(--color-shadow), var(--media-shadow-opacity));
 }
 
+.multicolumn-card .media--circle {
+  border-radius: 50%;
+}
+
 .media--circle .multicolumn-card__image {
   border-radius: 50%;
 }
@@ -216,7 +220,6 @@
 .multicolumn-card > .multicolumn-card__image-wrapper--full-width:not(.multicolumn-card-spacing) {
   border-top-left-radius: calc(var(--text-boxes-radius) - var(--text-boxes-border-width));
   border-top-right-radius: calc(var(--text-boxes-radius) - var(--text-boxes-border-width));
-  overflow: hidden;
 }
 
 .multicolumn.background-none .multicolumn-card {

From 57649ae876f190cf1d3be5fe5925ffcc075b5b94 Mon Sep 17 00:00:00 2001
From: Alistair Lane <alistair.lane@shopify.com>
Date: Tue, 14 Jun 2022 14:18:23 -0400
Subject: [PATCH 4/8] Media updates

---
 assets/base.css                     | 15 +++++++--------
 assets/component-deferred-media.css |  2 --
 assets/video-section.css            |  2 +-
 sections/main-article.liquid        |  2 +-
 snippets/article-card.liquid        |  2 +-
 5 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/assets/base.css b/assets/base.css
index 31dd6e603cb..9fc13331078 100644
--- a/assets/base.css
+++ b/assets/base.css
@@ -1221,23 +1221,24 @@ summary::-webkit-details-marker {
 }
 
 .media--square {
-  padding-bottom: 100%;
+  padding-bottom: calc(100% - var(--media-border-width) * 2);
 }
 
 .media--portrait {
-  padding-bottom: 125%;
+  padding-bottom: calc(125% - var(--media-border-width) * 2);
 }
 
 .media--landscape {
-  padding-bottom: 66.6%;
+  padding-bottom: calc(66.6% - var(--media-border-width) * 2);
 }
 
 .media--cropped {
-  padding-bottom: 56%;
+  padding-bottom: calc(56% - var(--media-border-width) * 2);
+
 }
 
 .media--16-9 {
-  padding-bottom: 56.25%;
+  padding-bottom: calc(56.25% - var(--media-border-width) * 2);
 }
 
 .media--circle {
@@ -1252,7 +1253,7 @@ summary::-webkit-details-marker {
 
 @media screen and (min-width: 990px) {
   .media--cropped {
-    padding-bottom: 63%;
+    padding-bottom: calc(63% - var(--media-border-width) * 2);
   }
 }
 
@@ -2833,8 +2834,6 @@ details-disclosure > details {
 .global-media-settings--full-width,
 .global-media-settings--full-width img {
   border-radius: 0;
-  border-left: none;
-  border-right: none;
 }
 
 /* check for flexbox gap in older Safari versions */
diff --git a/assets/component-deferred-media.css b/assets/component-deferred-media.css
index 58957423370..d5438bf7b86 100644
--- a/assets/component-deferred-media.css
+++ b/assets/component-deferred-media.css
@@ -4,8 +4,6 @@
   cursor: pointer;
   margin: 0;
   padding: 0;
-  height: 100%;
-  width: 100%;
   overflow: hidden;
 }
 
diff --git a/assets/video-section.css b/assets/video-section.css
index b2d9e35333e..90d3ea56cc2 100644
--- a/assets/video-section.css
+++ b/assets/video-section.css
@@ -1,6 +1,6 @@
 .video-section__media {
   position: relative;
-  padding-bottom: 56.25%;
+  padding-bottom: calc(56.25% - var(--media-border-width) * 2);
 }
 
 .video-section__media.deferred-media {
diff --git a/sections/main-article.liquid b/sections/main-article.liquid
index cdcad477525..0412d0ab56e 100644
--- a/sections/main-article.liquid
+++ b/sections/main-article.liquid
@@ -10,7 +10,7 @@
       {%- when 'featured_image'-%}
         {%- if article.image -%}
           <div class="article-template__hero-container" {{ block.shopify_attributes }}>
-            <div class="article-template__hero-{{ block.settings.image_height }} media"
+            <div class="article-template__hero-{{ block.settings.image_height }} media global-media-settings"
               itemprop="image"
               {% if block.settings.image_height == 'adapt' and article.image %} style="padding-bottom: {{ 1 | divided_by: article.image.aspect_ratio | times: 100 }}%;"{% endif %}
             >
diff --git a/snippets/article-card.liquid b/snippets/article-card.liquid
index 6ceb0b28dce..e83daf6f3b0 100644
--- a/snippets/article-card.liquid
+++ b/snippets/article-card.liquid
@@ -35,7 +35,7 @@
     >
       <div class="card__inner {% if settings.card_style == 'standard' %} color-{{ settings.card_color_scheme }} gradient{% endif %}{% if article.image and show_image or settings.card_style == 'standard' %} ratio{% endif %}" style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;">
         {%- if show_image == true and article.image -%}
-          <div class="article-card__image-wrapper card__media">
+          <div class="article-card__image-wrapper card__media global-media-settings">
             <div class="article-card__image media media--hover-effect" {% if section.settings.media_height == 'adapt' %} style="padding-bottom: {{ 1 | divided_by: article.image.aspect_ratio | times: 100 }}%;"{% endif %}>
               {% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
               <img

From fd2f8d19940bfbe38195e65657c0d1f63365043d Mon Sep 17 00:00:00 2001
From: Alistair Lane <alistair.lane@shopify.com>
Date: Fri, 24 Jun 2022 11:15:07 -0400
Subject: [PATCH 5/8] Update assets/section-multicolumn.css

Co-authored-by: Ludo <ludo.segura@shopify.com>
---
 assets/section-multicolumn.css | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/assets/section-multicolumn.css b/assets/section-multicolumn.css
index 3b3a941cb8b..1e8e9d49a67 100644
--- a/assets/section-multicolumn.css
+++ b/assets/section-multicolumn.css
@@ -209,10 +209,7 @@
     rgba(var(--color-shadow), var(--media-shadow-opacity));
 }
 
-.multicolumn-card .media--circle {
-  border-radius: 50%;
-}
-
+.multicolumn-card .media--circle,
 .media--circle .multicolumn-card__image {
   border-radius: 50%;
 }

From e8da4a65b48db960b9b58beadc7ac6ee902db298 Mon Sep 17 00:00:00 2001
From: Alistair Lane <alistair.lane@shopify.com>
Date: Fri, 24 Jun 2022 11:19:08 -0400
Subject: [PATCH 6/8] Reverting some changes

---
 assets/component-deferred-media.css | 2 ++
 sections/main-article.liquid        | 2 +-
 snippets/article-card.liquid        | 2 +-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/assets/component-deferred-media.css b/assets/component-deferred-media.css
index d5438bf7b86..58957423370 100644
--- a/assets/component-deferred-media.css
+++ b/assets/component-deferred-media.css
@@ -4,6 +4,8 @@
   cursor: pointer;
   margin: 0;
   padding: 0;
+  height: 100%;
+  width: 100%;
   overflow: hidden;
 }
 
diff --git a/sections/main-article.liquid b/sections/main-article.liquid
index 0412d0ab56e..cdcad477525 100644
--- a/sections/main-article.liquid
+++ b/sections/main-article.liquid
@@ -10,7 +10,7 @@
       {%- when 'featured_image'-%}
         {%- if article.image -%}
           <div class="article-template__hero-container" {{ block.shopify_attributes }}>
-            <div class="article-template__hero-{{ block.settings.image_height }} media global-media-settings"
+            <div class="article-template__hero-{{ block.settings.image_height }} media"
               itemprop="image"
               {% if block.settings.image_height == 'adapt' and article.image %} style="padding-bottom: {{ 1 | divided_by: article.image.aspect_ratio | times: 100 }}%;"{% endif %}
             >
diff --git a/snippets/article-card.liquid b/snippets/article-card.liquid
index e83daf6f3b0..6ceb0b28dce 100644
--- a/snippets/article-card.liquid
+++ b/snippets/article-card.liquid
@@ -35,7 +35,7 @@
     >
       <div class="card__inner {% if settings.card_style == 'standard' %} color-{{ settings.card_color_scheme }} gradient{% endif %}{% if article.image and show_image or settings.card_style == 'standard' %} ratio{% endif %}" style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;">
         {%- if show_image == true and article.image -%}
-          <div class="article-card__image-wrapper card__media global-media-settings">
+          <div class="article-card__image-wrapper card__media">
             <div class="article-card__image media media--hover-effect" {% if section.settings.media_height == 'adapt' %} style="padding-bottom: {{ 1 | divided_by: article.image.aspect_ratio | times: 100 }}%;"{% endif %}>
               {% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
               <img

From 2fbd2f4bf0f8168900cdd572df6fd486ffb2ba48 Mon Sep 17 00:00:00 2001
From: Alistair Lane <alistair.lane@shopify.com>
Date: Fri, 24 Jun 2022 11:21:07 -0400
Subject: [PATCH 7/8] Revert

---
 assets/base.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/assets/base.css b/assets/base.css
index 9fc13331078..548b7e7c31f 100644
--- a/assets/base.css
+++ b/assets/base.css
@@ -2834,6 +2834,8 @@ details-disclosure > details {
 .global-media-settings--full-width,
 .global-media-settings--full-width img {
   border-radius: 0;
+  border-left: none;
+  border-right: none;
 }
 
 /* check for flexbox gap in older Safari versions */

From dff714829a503691c3d2d05d93527d3f7661bfe0 Mon Sep 17 00:00:00 2001
From: Alistair Lane <alistair.lane@shopify.com>
Date: Fri, 24 Jun 2022 12:02:21 -0400
Subject: [PATCH 8/8] Simplifying changes

---
 assets/base.css                | 3 +--
 assets/section-multicolumn.css | 2 +-
 assets/video-section.css       | 2 +-
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/assets/base.css b/assets/base.css
index 548b7e7c31f..16975c423e9 100644
--- a/assets/base.css
+++ b/assets/base.css
@@ -1196,7 +1196,6 @@ summary::-webkit-details-marker {
   display: block;
   background-color: rgba(var(--color-foreground), 0.1);
   position: relative;
-  overflow: hidden;
 }
 
 .media--transparent {
@@ -1243,7 +1242,7 @@ summary::-webkit-details-marker {
 
 .media--circle {
   left: calc(-1 * var(--button-size));
-  padding-bottom: calc(100% - var(--media-border-width) * 2);
+  padding-bottom: 100%;
   border-radius: 50%;
 }
 
diff --git a/assets/section-multicolumn.css b/assets/section-multicolumn.css
index 1e8e9d49a67..3896bbd9dd7 100644
--- a/assets/section-multicolumn.css
+++ b/assets/section-multicolumn.css
@@ -200,7 +200,7 @@
   box-sizing: border-box;
 }
 
-.multicolumn-card .media {
+.multicolumn-card .multicolumn-card__image {
   border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity));
   border-radius: var(--media-radius);
   box-shadow: var(--media-shadow-horizontal-offset)
diff --git a/assets/video-section.css b/assets/video-section.css
index 90d3ea56cc2..b2d9e35333e 100644
--- a/assets/video-section.css
+++ b/assets/video-section.css
@@ -1,6 +1,6 @@
 .video-section__media {
   position: relative;
-  padding-bottom: calc(56.25% - var(--media-border-width) * 2);
+  padding-bottom: 56.25%;
 }
 
 .video-section__media.deferred-media {