CHG: Improve media, docs, Asian typography and examples

1 files changed, 20 insertions, 4 deletions

diff --git a/src/media.less b/src/media.less
index d4d2f89..1072304 100644
--- a/src/media.less
+++ b/src/media.less
@@ -6,18 +6,26 @@
 }
 
 .video-responsive {
-  height: 0;
+  display: block;
   overflow: hidden;
-  padding-bottom: 56.25%; /* Default 16:9, you can calculate this value by dividing 9 by 16 */
-  padding-top: 3rem;
+  padding: 0;
   position: relative;
+  width: 100%;
+
+  &::before {
+    content: "";
+    display: block;
+    padding-bottom: 56.25%; /* Default 16:9, you can calculate this value by dividing 9 by 16 */
+  }
 
   iframe,
   object,
   embed {
+    bottom: 0;
     height: 100%;
     left: 0;
     position: absolute;
+    right: 0;
     top: 0;
     width: 100%;
   }
@@ -29,7 +37,15 @@
 }
 
 .video-responsive-4-3 {
-  padding-bottom: 75%; /* 4:3 */
+  &::before {
+    padding-bottom: 75%; /* 4:3 */
+  }
+}
+
+.video-responsive-1-1 {
+  &::before {
+    padding-bottom: 100%; /* 1:1 */
+  }
 }
 
 .figure {