chore: refactor media grid to display books at proper sizes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "7.4.0",
+  "version": "7.5.0",
   "description": "The source for my personal site. Built using 11ty.",
   "type": "module",
   "scripts": {

src/_includes/partials/now/media-grid.liquid

@@ -15,8 +15,7 @@
     {% for item in media limit: count %}
       {% assign alt = item.alt | strip | escape %}
       <a href="{{ item.url | stripUtm }}" title="{{ alt }}">
-        <div class="item__wrapper">
-        {% if item.subtext %}<div class="item__cover"></div>{% endif %}
+        <div class="item__wrapper{% if item.subtext %} shadow{% endif %}">
           <div class="item__meta-text">
             {% if item.title %}
               <div class="header">{{ item.title }}</div>

src/assets/styles/components/media-grid.css

@@ -1,7 +1,6 @@
 :root {
   --grid-square: repeat(2,minmax(0,1fr));
   --grid-vertical: repeat(3,minmax(0,1fr));
-  --item-wrapper-max-width: 193px;
 }
 
 .now__section--header {
@@ -17,60 +16,49 @@
   grid-template-columns: var(--grid-square);
 }
 
-.media__grid.square a {
-  aspect-ratio: 1/1;
-}
-
 .media__grid.vertical {
   grid-template-columns: var(--grid-vertical);
 }
 
-.media__grid.vertical a {
-  aspect-ratio: 2/3;
-}
-
-.media__grid.square a,
-.media__grid.square a,
-.media__grid .item__wrapper {
-  height: 100%;
-  width: 100%;
-}
-
-.media__grid.vertical .item__wrapper {
-  max-width: var(--item-wrapper-max-width);
-}
-
 .media__grid .item__wrapper {
   position: relative;
-  border: 1px solid var(--accent-color);
-  border-radius: var(--rounded-md);
-  overflow: hidden;
-  transition-property: border-color;
-  transition-timing-function: var(--transition-ease-in-out);
-  transition-duration: 300ms;
 }
 
-.media__grid .item__wrapper:hover,
-.media__grid .item__wrapper:focus,
-.media__grid .item__wrapper:active {
-  border-color: var(--accent-color-hover)
-}
-
-.media__grid .item__cover {
+.media__grid .item__wrapper.shadow:before {
   position: absolute;
-  top: 0;
-  left: 0;
+  z-index: 1;
+  content: '';
+  top: 1px;
+  left: 1px;
+  border-radius: calc(var(--rounded-md) * .85);
+  box-shadow: inset 0 -70px 50px -40px #000;
+}
+
+.media__grid.vertical .item__wrapper.shadow:before {
   width: 100%;
-  height: 100%;
-  border-radius: var(--rounded-sm);
-  background-image: linear-gradient(180deg,transparent 0,rgba(0,0,0,.15) 70%,rgba(0,0,0,.75));
+  height: 95.75%;
+}
+
+.media__grid a:hover img,
+.media__grid a:focus img,
+.media__grid a:active img {
+  border-color: var(--accent-color-hover)
 }
 
 .media__grid .item__meta-text {
   position: absolute;
+  z-index: 2;
   padding: 0 var(--sizing-sm);
-  width: 90%;
-  bottom: var(--sizing-sm);
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.media__grid.square .item__meta-text {
+    bottom: var(--sizing-xs);
+}
+
+.media__grid.vertical .item__meta-text {
+    bottom: var(--sizing-md);
 }
 
 .media__grid .item__meta-text .header,
@@ -86,14 +74,31 @@
 }
 
 .media__grid img {
+  border: 1px solid var(--accent-color);
+  border-radius: var(--rounded-md);
+  transition-property: border-color;
+  transition-timing-function: var(--transition-ease-in-out);
+  transition-duration: 300ms;
+}
+
+.media__grid.square a,
+.media__grid.square .item__wrapper,
+.media__grid.square .item__wrapper.shadow:before,
+.media__grid.square img {
   width: 100%;
   height: 100%;
 }
 
+.media__grid.vertical a,
+.media__grid.vertical .item__wrapper,
+.media__grid.vertical img {
+  width: 100%;
+  height: auto;
+}
+
 @media screen and (min-width: 768px) {
   :root {
     --grid-square: repeat(4,minmax(0,1fr));
     --grid-vertical: repeat(6,minmax(0,1fr));
-    --item-wrapper-max-width: 121px;
   }
 }