Add global settings cards (#886)

* Add settings to schema

* Edit template

* Add styles

* Use decimal for border-radius

* Refactor markup

* Adjust styles for product card

* Add styles

* Add settings

* Update setting and CSS variable names

* Update cards for search results

* Clean up CSS

* Update product card placeholder

* Fix visual bugs. Adjust shadow setting min

* Update markup for collection list cards

* Update hover styles

* Adjust collection arrow

* Adjust collection arrow

* Rename snippet for product card. Create snippet for collection card

* Remove separate placeholder for product card

* Adjustments for image ratio

* Add support for auto height for collage

* Clean up CSS

* Fix typo

* Fix pick up availability 'Unavailable' (#855)

* Fix pick up availability 'Unavailable'

* reuse similar check used in the same file

* Remove redundant section settings

* Update 1 translation file (#866)

Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>

* Product image seo (#812)

* Version bump to 2.4.0 (#884)

* Add translation strings for en

* Adjust styles

* Update snippets/card-product.liquid

* Adjust settings organization

* Update layout/theme.liquid

Co-authored-by: Tyler Alsbury <60230011+tyleralsbury@users.noreply.github.com>

* Remove redundant padding

* Address feedback - Clean up unused CSS

* Fix interaction with border and background

* Fix collage

* Adjust price layout

* Adjust price layout

Co-authored-by: Ludo <ludo.segura@shopify.com>
Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>
Co-authored-by: Tyler Alsbury <60230011+tyleralsbury@users.noreply.github.com>

assets/base.css

@@ -2384,7 +2384,7 @@ details-disclosure > details {
 
 .badge {
   border: 1px solid transparent;
-  border-radius: 4rem;
+  border-radius: var(--badge-corner-radius);
   display: inline-block;
   font-size: 1.2rem;
   letter-spacing: 0.1rem;
@@ -2414,3 +2414,15 @@ details-disclosure > details {
   }
 }
 
+.ratio {
+  display: flex;
+  position: relative;
+  align-items: stretch;
+}
+
+.ratio::before {
+  content: '';
+  width: 0;
+  height: 0;
+  padding-bottom: var(--ratio-percent);
+}

assets/collage.css

@@ -98,12 +98,6 @@
     grid-column: 1 / span 3;
     max-width: 100%;
   }
-
-  .collage-card:not(.collage-card--left):not(.collage-card--right) > * {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-  }
 }
 
 .collage-card .card,
@@ -161,7 +155,6 @@
 
 .collage-content {
   justify-content: center;
-  overflow: hidden;
 }
 
 .collage-content h3 {