♻️ Simplifies block styles with widely supported CSS attributes

assets/css/center.css

@@ -1,10 +1,9 @@
 .center {
   box-sizing: content-box;
-  margin-left: auto;
-  margin-right: auto;
-  max-width: var(--center-max);
-  padding-left: var(--center-gutters);
-  padding-right: var(--center-gutters);
+  margin-inline: auto;
+  max-inline-size: var(--center-max);
+  padding-inline-end: var(--center-gutters);
+  padding-inline-start: var(--center-gutters);
 }
 
 .center_text {

assets/css/cover.css

@@ -1,24 +1,22 @@
 .cover {
   display: flex;
   flex-direction: column;
-  min-height: var(--cover-min-height);
+  min-block-size: var(--cover-min-height);
   padding: var(--cover-space);
 }
 
 .cover > * {
-  margin-bottom: var(--cover-space);
-  margin-top: var(--cover-space);
+  margin-block: var(--cover-space);
 }
 
 .cover > :first-child:not(.cover__center) {
-  margin-top: 0;
+  margin-inline-start: 0;
 }
 
 .cover > :last-child:not(.cover__center) {
-  margin-bottom: 0;
+  margin-inline-end: 0;
 }
 
 .cover > .cover__center {
-  margin-bottom: auto;
-  margin-top: auto;
+  margin-block: auto;
 }

assets/css/frame.css

@@ -1,30 +1,14 @@
 .frame {
-  padding-bottom: calc(var(--frame-numerator) / var(--frame-denominator) * 100%);
-  position: relative;
-}
-
-.frame > * {
   align-items: center;
-  bottom: 0;
+  aspect-ratio: var(--frame-denominator) / var(--frame-numerator);
   display: flex;
   justify-content: center;
-  left: 0;
   overflow: hidden;
-  position: absolute;
-  right: 0;
-  top: 0;
 }
 
 .frame > img,
 .frame > video {
-  height: 100%;
+  block-size: 100%;
+  inline-size: 100%;
   object-fit: cover;
-  width: 100%;
 }
-
-@supports(aspect-ratio: var(--frame-denominator) / var(--frame-numerator)) {
-  .frame {
-    aspect-ratio: var(--frame-denominator) / var(--frame-numerator);
-    padding-bottom: var(--off);
-  }
-}

assets/css/image.css

@@ -9,11 +9,11 @@ picture {
   max-width: 100%;
 }
 
-img[width] {
+img:not(.icon)[width] {
   width: auto;
 }
 
-img[width][height] {
+img:not(.icon)[width][height] {
   height: auto;
 }
 

assets/css/imposter.css

@@ -1,14 +1,14 @@
 .imposter {
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
   position: absolute;
-  top: 50%;
-  left: 50%;
   transform: translate(-50%, -50%);
 }
 
 .imposter_container {
+  max-block-size: calc(100% - (var(--imposter-margin) * 2));
+  max-inline-size: calc(100% - (var(--imposter-margin) * 2));
   overflow: auto;
-  max-width: calc(100% - (var(--imposter-margin) * 2));
-  max-height: calc(100% - (var(--imposter-margin) * 2));
 }
 
 .imposter_fixed {

assets/css/reel.css

@@ -1,6 +1,6 @@
 .reel {
   display: flex;
-  height: var(--reel-height);
+  block-size: var(--reel-height);
   overflow-x: auto;
   overflow-y: hidden;
   scrollbar-color: var(--thumb-color) var(--track-color);
@@ -29,14 +29,14 @@
 
 .reel > img {
   flex-basis: auto;
-  height: 100%;
+  block-size: 100%;
   width: auto;
 }
 
 .reel > * + * {
-  margin-left: var(--reel-space);
+  margin-inline-start: var(--reel-space);
 }
 
 .js-reel_overflowing {
-  padding-bottom: var(--reel-space);
+  padding-block-end: var(--reel-space);
 }

assets/css/stack.css

@@ -6,11 +6,10 @@
 
 .stack:not(.stack_recursive) > *,
 .stack.stack_recursive * {
-  margin-bottom: 0;
-  margin-top: 0;
+  margin-block: 0;
 }
 
 .stack:not(.stack_recursive) > * + *,
 .stack.stack_recursive * + * {
-  margin-top: var(--stack-space);
+  margin-block-start: var(--stack-space);
 }