fix(finances): two column layout breakpoint

- content quote layout on mobile
- add picture preset for content images
- fix reflow on video load
- move video styles into show css to make use of show color theme

_data/financials.json

@@ -75,7 +75,7 @@
     "color": "orange",
     "positions": [
       {
-        "value": "auto / 1 / span 3 / -1"
+        "value": "auto / 1 / span 4 / -1"
       },
       {
         "breakpoint": "sm",
@@ -90,7 +90,7 @@
     "color": "cyan",
     "positions": [
       {
-        "value": "auto / 1 / span 3 / -1"
+        "value": "auto / 1 / span 4 / -1"
       },
       {
         "breakpoint": "sm",

_data/picture.yml

@@ -2,10 +2,10 @@
 
 media_queries:
     mobile: 'max-width: 480px'
-    tablet: 'max-width: 768'
+    tablet: 'max-width: 768px'
     laptop: 'max-width: 1024px'
-    desktop: 'max-width: 1200'
-    wide: 'min-width: 1201'
+    desktop: 'max-width: 1200px'
+    wide: 'min-width: 1201px'
 
 presets:
   default:
@@ -88,3 +88,17 @@ presets:
       webp: 100
       avif: 100
       jp2: 100
+
+  content-image:
+    formats: [webp, original]
+    widths: [250, 300, 360, 416]
+    fallback_width: 300 # The default is 800, which is probably too big.
+    size: calc(100vw - 8rem)
+    sizes:
+      tablet: 300px
+    formats:  [webp, original]
+    dimension_attributes: true
+    format_quality:
+      webp: 100
+      avif: 100
+      jp2: 100

_includes/components/video.html

@@ -1 +1 @@
-<video src="{{ include.url }}" width="400" controls=""></video>
+<video src="{{ include.url }}" width="100%" controls=""></video>

_includes/page-types/content.html

@@ -32,7 +32,7 @@ <h2 class="content-title">{{ content.title }}</h2>
 
     {%- if content.featured-image -%}
     <figure class="content-featured-image">
-      {% picture show-featured-image {{ content.featured-image.url }} --alt {{ content.featured-image.alt }}  %}
+      {% picture content-image {{ content.featured-image.url }} --alt {{ content.featured-image.alt }}  %}
     </figure>
     {%- endif -%}
   </div>

_sass/_content.scss

@@ -115,17 +115,17 @@
 
   blockquote.image {
     display: grid;
-    grid-template-columns: 1fr 2fr;
-    grid-template-rows: repeat(2, auto);
     column-gap: var(--_content--column-gap);
-    row-gap: 0;
-
-    picture { grid-area: 1 / 1 / 3 / 2; }
+    row-gap: var(--_content--row-gap);
 
     img {
       border-radius: 20px;
       box-shadow: 10px -10px 0px 0px var(--_content--accent--color1), -10px 10px 0px 0px var(--_content--accent--color2);
     }
+
+    @media (min-width: 768px) {
+      grid-template-columns: 1fr 2fr;
+    }
   }
 }
 

_sass/_finances.scss

@@ -12,7 +12,7 @@
    */
   $gap: 4rem;
   $columns: 2;
-  $min-width: 500px;
+  $min-width: 600px;
 
   /**
    * Calculated values.

_sass/_layout.scss

@@ -138,10 +138,3 @@ blockquote {
   font-size: .875rem;
   font-weight: bold;
 }
-
-video {
-  width: 100%    !important;
-  height: auto   !important;
-  border-radius: 20px;
-  box-shadow: 0 5px 0px 0px $yellow;
-}

_sass/_show.scss

@@ -414,15 +414,22 @@
 
   display: grid;
   grid-template-columns: subgrid;
-  row-gap: calc(var(--_show--row-gap) / 2);
+  row-gap: var(--_show--row-gap);
 
   max-width: 100vw;
 }
 
 .show-video {
   grid-column: wide;
-  justify-self: center;
-  text-align: center;
+
+  position: relative;
+  display: grid;
+  aspect-ratio: 16 / 9;
+
+  video {
+    border-radius: 20px;
+    box-shadow: 0 5px 0px 0px var(--_show--color);
+  }
 }
 
 .show-mosaic {