html + css > auto/grids + utility class refinement

Author: iolla-net

404.html

@@ -41,7 +41,7 @@
   <main class="error main" role="main">
     <div class="wrap wide">
       <ul class="facet grid">
-  			    			<li class="plate column" style="--columns: 4">
+  			    			<li class="plate column">
     				          			            		<div><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 188 188"><circle cx="94" cy="94" r="93.75" style="fill:#919191;" /><ellipse cx="94" cy="94" rx="82.878" ry="82.9" /><circle cx="94" cy="94" r="21.818" style="fill:#f00;" /></svg></div>
           		              	<div class="plate-content hal">
                  		<h1>I am completely operational and all of my circuits are functioning perfectly.</h1>

assets/css/iolla.css

@@ -562,6 +562,10 @@ blockquote:last-child {
   grid-template-columns: 1fr;
 }
 
+.surface, .facet {
+ --columns: 4;
+}
+
 .grid > .column {
   margin-bottom: var(--gutter);
 }
@@ -575,6 +579,12 @@ blockquote:last-child {
   grid-auto-flow: dense;
 }
 
+.autogrid .work-grid-title {
+  font-family: Montserrat, Helvetica, Arial, sans-serif;
+}
+
+.autogrid figcaption {line-height: inherit;}
+
 .group {
 	--gutter: .1rem;
 	--min: 1rem;
@@ -1118,7 +1128,8 @@ body {
 
 .menu-item:hover,
 .footer-menu a:hover,
-.footer-privacy a:hover {
+.footer-privacy a:hover,
+.autogrid figure:hover .work-grid-title {
 	display: inline;
   	background:
     linear-gradient(
@@ -1130,6 +1141,9 @@ body {
   transition: .25s;
 }
 
+.autogrid .work-grid-title {color: var(--clr-text);}
+.autogrid figure:hover .work-grid-title {background-position: 0 13px;}
+
 .menu-item.is-active, .footer-privacy.is-active a {
   background:
     linear-gradient(
@@ -1479,4 +1493,4 @@ blockquote {
 
 .plate svg:not(.attractor svg):not(.error svg) {width: 220px; height: 220px;}
 .pagination-item svg {width: 50px; height: 50px;}
-}
+}

info.html

@@ -45,7 +45,7 @@ <h2 class="sub-heading">A little more about me…</h2>
     </header>
     <div class="wrap wide">
       <ul class="facet grid">
-  			    			<li class="plate column" style="--columns: 4">
+  			    			<li class="plate column">
     				          			            <div><img src="https://iolla.net/media/pages/info/89fdcaa0e1-1666171631/countenance.jpg" width="600" alt="Headshot of John Coyne website designer" class="plate-image" /></div>
                         	<div class="plate-content">
       	                           		<p class="personal">Aside from a BA in 'Applied Graphics Technology for Web &amp; Multimedia', and an award winning HND in 'Digital Media for Web &amp; Print Publishing', I have over 20 years experience in clever code and distinctive design. I started developing websites in 2003 and have continued to build a wealth of constantly evolving skills, knowledge and expertise since then.</p>
@@ -54,21 +54,21 @@ <h2 class="sub-heading">A little more about me…</h2>
          			                       <a href="mailto:[email protected]" class="btn">[email protected]</a>
                </div>
      		     </li>
-      			<li class="plate column" style="--columns: 4">
+      			<li class="plate column">
     				          			            <div><img src="https://iolla.net/media/pages/info/e0e8514a9d-1666171639/eilean-donan-castle.jpg" width="600" alt="Eilean Donan castle on a cloudy day" class="plate-image" /></div>
                         	<div class="plate-content">
       	         		<h3 class="plate-title text">I live &amp; work in Scotland</h3>
          			                 		<p class="plate-tagline text">This isn't a picture of my actual house</p>
          			                                 </div>
      		     </li>
-      			<li class="plate column" style="--columns: 4">
+      			<li class="plate column">
     				          			            <div><img src="https://iolla.net/media/pages/info/b3d3d4b931-1666171653/cats.jpg" width="600" alt="A short haired black cat and a long haired tabby cat sitting indoors on a climbing frame" class="plate-image" /></div>
                         	<div class="plate-content">
       	         		<h3 class="plate-title text">I'm a loyal &amp; tireless <a href="alya.html">cat</a> butler</h3>
          			                 		<p class="plate-tagline text">Rated &#9733; &#9733; &#9733; &#9733; room for improvement</p>
          			                                 </div>
      		     </li>
-      			<li class="plate column" style="--columns: 4">
+      			<li class="plate column">
     				          			            <div><img src="https://iolla.net/media/pages/info/0c141b2cbc-1666171645/vo2max.jpg" width="600" alt="Garmin fenix fitness watch displaying a VO2 Max graph of 64" class="plate-image" /></div>
                         	<div class="plate-content">
       	         		<h3 class="plate-title text">I'm a very passionate runner</h3>