styling edit - iframe portrait, hr separator edit

vue-theme/src/pages/single.vue

             img.feature
                 width: 20em 
             li
-        /* responsive iframe embeds 16:9 */
+        /* iframe container 16:9 */
         .iframe-container 
             position: relative
             width: 100% 
             padding-bottom: 56.25% 
 
-        .iframe-container iframe 
+        /* iframe container portrait */
+        .iframe-container-v
+            position: relative
+            width: 100%
+            height: 100%
+            padding-bottom: 125%
+            
+        iframe 
             position: absolute 
             top: 0px 
             left: 0px 
             width: 100% 
             height: 100%
         
-        wp-block-embed is-type-video
+        .wp-block-embed .is-type-video
             position: relative
             width: 100% 
             padding-bottom: 56.25% 
 
-        * hr.wp-block-separator
-            border: 0.5px
-            margin: $ms-2
+        * hr
+            border: $ms--3
+            margin: $ms-2 auto
+            outline-style: auto
 
-        hr.is-style-default
-            height: 2px
+            &.is-style-default
+                height: 1px
+                width: 15vw
 
-        hr.is-style-wide
-            height: 3px
+            &.is-style-wide
+                height: 1px
+                width: 50vw
+        
+            &.is-style-dots
+                outline-style: none
+                font-weight: bolder
 
         breadcrumb
             h5