From c664049195cfc5da95e859b3f9e600897703247d Mon Sep 17 00:00:00 2001
From: Paul Eiche <peiche@gmail.com>
Date: Mon, 8 Nov 2021 16:12:10 -0600
Subject: [PATCH 1/2] Convert the aspect ratio utility classes to use the
 `aspect-ratio` property.

---
 main/assets/css/base/_util.scss | 29 ++++++++++++-----------------
 1 file changed, 12 insertions(+), 17 deletions(-)

diff --git a/main/assets/css/base/_util.scss b/main/assets/css/base/_util.scss
index ec16ff1..083d389 100644
--- a/main/assets/css/base/_util.scss
+++ b/main/assets/css/base/_util.scss
@@ -63,17 +63,12 @@
 // --------------------------------
 
 [class^="aspect-ratio"], [class*=" aspect-ratio"] {
-  --aspect-ratio: calc(16/9);
-  position: relative;
-  height: 0;
-  padding-bottom: calc(100%/(var(--aspect-ratio)));
+  --aspect-ratio: 16/9;
 
   > * {
-    position: absolute;
-    top: 0;
-    left: 0;
     width: 100%;
-    height: 100%;
+    height: auto;
+    aspect-ratio: var(--aspect-ratio);
 
     &:not(iframe) {
       object-fit: cover;
@@ -81,15 +76,15 @@
   }
 }
 
-.aspect-ratio-16\:9 { --aspect-ratio: calc(16/9); }
-.aspect-ratio-3\:2  { --aspect-ratio: calc(3/2); }
-.aspect-ratio-4\:3  { --aspect-ratio: calc(4/3); }
-.aspect-ratio-5\:4  { --aspect-ratio: calc(5/4); }
-.aspect-ratio-1\:1  { --aspect-ratio: calc(1/1); }
-.aspect-ratio-4\:5  { --aspect-ratio: calc(4/5); }
-.aspect-ratio-3\:4  { --aspect-ratio: calc(3/4); }
-.aspect-ratio-2\:3  { --aspect-ratio: calc(2/3); }
-.aspect-ratio-9\:16 { --aspect-ratio: calc(9/16); }
+.aspect-ratio-16\:9 { --aspect-ratio: 16/9; }
+.aspect-ratio-3\:2  { --aspect-ratio: 3/2; }
+.aspect-ratio-4\:3  { --aspect-ratio: 4/3; }
+.aspect-ratio-5\:4  { --aspect-ratio: 5/4; }
+.aspect-ratio-1\:1  { --aspect-ratio: 1/1; }
+.aspect-ratio-4\:5  { --aspect-ratio: 4/5; }
+.aspect-ratio-3\:4  { --aspect-ratio: 3/4; }
+.aspect-ratio-2\:3  { --aspect-ratio: 2/3; }
+.aspect-ratio-9\:16 { --aspect-ratio: 9/16; }
 
 // --------------------------------
 

From 7a6b7d1e523ee585791151f92da120b6ee172511 Mon Sep 17 00:00:00 2001
From: Paul Eiche <peiche@gmail.com>
Date: Wed, 1 Dec 2021 16:11:17 -0600
Subject: [PATCH 2/2] Added aspect ratio fallback for browsers that don't
 support it.

---
 main/assets/css/base/_util.scss | 34 +++++++++++++++++++++++----------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/main/assets/css/base/_util.scss b/main/assets/css/base/_util.scss
index 083d389..f932ea9 100644
--- a/main/assets/css/base/_util.scss
+++ b/main/assets/css/base/_util.scss
@@ -63,7 +63,13 @@
 // --------------------------------
 
 [class^="aspect-ratio"], [class*=" aspect-ratio"] {
-  --aspect-ratio: 16/9;
+  --aspect-ratio: calc(16/9);
+
+  @supports not (aspect-ratio: 1/1) {
+    position: relative;
+    height: 0;
+    padding-bottom: calc(100%/(var(--aspect-ratio)));
+  }
 
   > * {
     width: 100%;
@@ -73,18 +79,26 @@
     &:not(iframe) {
       object-fit: cover;
     }
+
+    @supports not (aspect-ratio: 1/1) {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
   }
 }
 
-.aspect-ratio-16\:9 { --aspect-ratio: 16/9; }
-.aspect-ratio-3\:2  { --aspect-ratio: 3/2; }
-.aspect-ratio-4\:3  { --aspect-ratio: 4/3; }
-.aspect-ratio-5\:4  { --aspect-ratio: 5/4; }
-.aspect-ratio-1\:1  { --aspect-ratio: 1/1; }
-.aspect-ratio-4\:5  { --aspect-ratio: 4/5; }
-.aspect-ratio-3\:4  { --aspect-ratio: 3/4; }
-.aspect-ratio-2\:3  { --aspect-ratio: 2/3; }
-.aspect-ratio-9\:16 { --aspect-ratio: 9/16; }
+.aspect-ratio-16\:9 { --aspect-ratio: calc(16/9); }
+.aspect-ratio-3\:2  { --aspect-ratio: calc(3/2); }
+.aspect-ratio-4\:3  { --aspect-ratio: calc(4/3); }
+.aspect-ratio-5\:4  { --aspect-ratio: calc(5/4); }
+.aspect-ratio-1\:1  { --aspect-ratio: calc(1/1); }
+.aspect-ratio-4\:5  { --aspect-ratio: calc(4/5); }
+.aspect-ratio-3\:4  { --aspect-ratio: calc(3/4); }
+.aspect-ratio-2\:3  { --aspect-ratio: calc(2/3); }
+.aspect-ratio-9\:16 { --aspect-ratio: calc(9/16); }
 
 // --------------------------------