From b25796cc6715bcfd25b7e47fc66ac19682695ce6 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Fri, 2 Feb 2024 19:02:42 -0800
Subject: [PATCH] fix: improve aspect ratio

---
 package.json                             |  2 +-
 src/assets/styles/widgets/media-grid.css | 17 +++++++++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index a7f23177..57b9bfb5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "5.2.5",
+  "version": "5.2.6",
   "description": "The source for my personal site. Built using 11ty and hosted on Netlify.",
   "type": "module",
   "scripts": {
diff --git a/src/assets/styles/widgets/media-grid.css b/src/assets/styles/widgets/media-grid.css
index 0744f8f6..bc985f3b 100644
--- a/src/assets/styles/widgets/media-grid.css
+++ b/src/assets/styles/widgets/media-grid.css
@@ -18,18 +18,31 @@
   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;
-  height: 100%;
-  width: 100%;
   border: 1px solid var(--accent-color);
   border-radius: var(--rounded-md);
   overflow: hidden;