Move JS to layout HTML for faster loading

Keep images square through JS and not a bug with ::after

onlylegs/static/sass/components/gallery.sass

@@ -24,8 +24,6 @@
     margin: 0.35rem
     padding: 0
 
-    height: auto
-
     position: relative
 
     border-radius: $rad-inner
@@ -44,8 +42,7 @@
         height: auto
 
         position: absolute
-        left: 0
-        bottom: 0
+        inset: 0
 
         display: flex
         flex-direction: column
@@ -88,12 +85,6 @@
         object-position: center
 
         background-color: RGB($bg-bright)
-        transition: all 0.2s cubic-bezier(.79, .14, .15, .86)
-
-    &:after
-        content: ""
-        display: block
-        padding-bottom: 100%
 
     &:hover
         box-shadow: 0 0.2rem 0.4rem 0.1rem RGBA($bg-100, 0.6)
@@ -105,8 +96,6 @@
     margin: 0.35rem
     padding: 0
 
-    height: auto
-
     position: relative
 
     border-radius: $rad-inner
@@ -171,8 +160,7 @@
             height: 100%
 
             position: absolute
-            top: 0
-            left: 0
+            inset: 0
 
             object-fit: cover
             object-position: center
@@ -181,7 +169,7 @@
             border-radius: $rad-inner
             box-shadow: 0 0 0.4rem 0.25rem RGBA($bg-100, 0.1)
 
-            transition: all 0.2s cubic-bezier(.79, .14, .15, .86)
+            transition: transform 0.2s cubic-bezier(.79, .14, .15, .86)
 
         &.size-1
             .data-1
@@ -206,11 +194,6 @@
                 transform: scale(0.6) rotate(-1deg) translate(-15%, -23%)
                 z-index: +1
 
-    &:after
-        content: ""
-        display: block
-        padding-bottom: 100%
-
     &:hover
         .images
             &.size-1