fix: set explicit aspect ratios

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "19.6.6",
+  "version": "19.6.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "19.6.6",
+      "version": "19.6.7",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.4.0",

package.json

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

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

@@ -1,6 +1,8 @@
 :root {
   --grid-square: repeat(2,minmax(0,1fr));
   --grid-vertical: repeat(3,minmax(0,1fr));
+  --aspect-ratio-square: 1/1;
+  --aspect-ratio-vertical: 2/3;
 }
 
 .media-grid {
@@ -15,6 +17,10 @@
   &.square {
     grid-template-columns: var(--grid-square);
 
+    & a {
+      aspect-ratio: var(--aspect-ratio-square);
+    }
+
     & img {
       width: 100%;
       height: 100%;
@@ -24,6 +30,10 @@
   &.vertical {
     grid-template-columns: var(--grid-vertical);
 
+    & a {
+      aspect-ratio: var(--aspect-ratio-vertical);
+    }
+
     & img {
       width: 100%;
       height: auto;

src/assets/styles/pages/watching.css

@@ -1,3 +1,7 @@
+:root {
+  --aspect-ratio-banner: 1 / 0.5625;
+}
+
 .watching {
   & img {
     border: 1px solid var(--accent-color);
@@ -12,12 +16,13 @@
   &.hero {
     position: relative;
     overflow: hidden;
+    aspect-ratio: var(--aspect-ratio-banner);
 
     div.meta-text {
       color: white;
       position: absolute;
       left: var(--sizing-sm);
-      bottom: var(--sizing-lg);
+      bottom: var(--sizing-sm);
       z-index: 2;
       display: flex;
       flex-direction: column;
@@ -43,11 +48,11 @@
       position: absolute;
       z-index: 1;
       content: '';
-      bottom: 11px;
+      bottom: 0;
       left: 1px;
       box-shadow: inset 0 -70px 75px -40px #000;
       width: calc(100% - 2px);
-      height: calc(100% - 11px);
+      height: 100%;
     }
   }
 
@@ -57,9 +62,9 @@
     grid-template-columns: repeat(2, minmax(0, 1fr));
     margin-bottom: var(--sizing-base);
 
-    & a,
-    & div {
+    & a {
       display: flex;
+      aspect-ratio: var(--aspect-ratio-banner);
     }
 
     & div {
@@ -103,6 +108,7 @@
     position: relative;
     display: flex;
     overflow: hidden;
+    aspect-ratio: var(--aspect-ratio-banner);
 
     &.shadow::after {
       position: absolute;