correct main content area padding issue on smaller viewports, normalize page edging variable usage, correct flex snapping of figure element to full on smaller viewports

Author: possumbilities

src/css/vocabulary.css

@@ -1133,7 +1133,7 @@ body > header .explore-panel nav ul li p {
 
 body > article.attention {
     grid-column: 1 / span 11;
-    padding: 1em 5%;
+    padding: 1em var(--vocabulary-page-edges-space);
 
     background: var(--vocabulary-brand-color-soft-green);
     font-family: 'Source Sans Pro';
@@ -1523,7 +1523,7 @@ body > footer .license svg {
 }
 
 .blog-index main .posts.featured ul {    
-    padding: 0 5%;
+    padding: 0 var(--vocabulary-page-edges-space);
 }
 
 .blog-index main .posts.featured ul li {
@@ -1901,7 +1901,7 @@ body > footer .license svg {
     }
 
     .blog-index main .posts {
-        padding: 0 5%;
+        padding: 0 var(--vocabulary-page-edges-space);
     }
 
     .blog-index main footer .attribution-list ul.expand {
@@ -1951,20 +1951,39 @@ body > footer .license svg {
     }
 
     main .content {
-        padding: var(--vocabulary-page-edges-space);
+        padding: 0 var(--vocabulary-page-edges-space);
+    }
+
+    main:has( > aside.sidebar) > aside.sidebar { 
+        padding: 0 var(--vocabulary-page-edges-space);
+    }
+
+
+    main > .posts {
+        padding: 0 var(--vocabulary-page-edges-space); 
     }
 
     .posts article figure {
         width: 100%;
         flex: initial;
     }
 
+    .search-index main > header {
+        padding-left: var(--vocabulary-page-edges-space);
+        padding-right: var(--vocabulary-page-edges-space);
+    }
+
+    .search-index main > header:before { 
+        left: 0;
+    }
+    
+
     .team-index main > header {
-        padding: 0 5%;
+        padding: 0 var(--vocabulary-page-edges-space);
     }
 
     .team-index main article.persons {
-        padding: 0 5%;
+        padding: 0 var(--vocabulary-page-edges-space);
     }
 
     .team-index main article.persons ul {
@@ -2009,6 +2028,11 @@ body > footer .license svg {
     main article.posts.related ul {
         grid-template-columns: 1fr;
     }
+
+    .posts .post figure {
+        width: 100%;
+        flex: initial;
+    }
 }
 
 @media (max-width: 425px) {