Sophisticated Business: Fix hard coded column width for Media & Text Block

See: #644

sophisticated-business/sass/blocks/_blocks.scss

@@ -814,18 +814,12 @@
 		}
 
 		@include media(tablet) {
-			// Modify the default 50-50 proportion between image and text.
-			grid-template-columns: 60% auto;
 
 			.wp-block-media-text__content {
 				padding-left: 4.5%;
 				margin-left: 7.5%;
 			}
 
-			&.has-media-on-the-right {
-				grid-template-columns: auto 60%;
-			}
-
 			&.alignfull + .wp-block-media-text {
 				margin-top: -44px;
 			}

sophisticated-business/style-editor.css

@@ -600,17 +600,6 @@ figcaption,
   color: inherit;
 }
 
-@media only screen and (min-width: 768px) {
-  [data-type="core/media-text"] .wp-block-media-text {
-    grid-template-columns: 60% auto !important;
-    /* !important to override inline styles */
-  }
-  [data-type="core/media-text"] .wp-block-media-text.has-media-on-the-right {
-    grid-template-columns: auto 60% !important;
-    /* !important to override inline styles */
-  }
-}
-
 [data-type="core/media-text"] + [data-type="core/media-text"] {
   margin-top: -32px;
 }

sophisticated-business/style-editor.scss

@@ -607,15 +607,6 @@ figcaption,
 		a:hover {
 			color: inherit;
 		}
-
-		@include media(tablet) {
-			// Modify the default 50-50 proportion between image and text.
-			grid-template-columns: 60% auto !important; /* !important to override inline styles */
-
-			&.has-media-on-the-right {
-				grid-template-columns: auto 60% !important; /* !important to override inline styles */
-			}
-		}
 	}
 
 	& + [data-type="core/media-text"] {

sophisticated-business/style-rtl.css

@@ -1239,6 +1239,17 @@ body.page .main-navigation {
   margin-left: calc( .25 * 1rem);
 }
 
+.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu {
+  display: block;
+  right: 0;
+  margin-top: 0;
+  opacity: 1;
+  width: auto;
+  min-width: 100%;
+  /* Non-mobile position */
+  /* Nested sub-menu dashes */
+}
+
 .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu {
   display: block;
   right: 0;
@@ -1251,6 +1262,21 @@ body.page .main-navigation {
 }
 
 @media only screen and (min-width: 768px) {
+  .main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu {
+    display: block;
+    margin-top: 0;
+    opacity: 1;
+    position: absolute;
+    right: 0;
+    left: auto;
+    top: auto;
+    bottom: auto;
+    height: auto;
+    min-width: -moz-max-content;
+    min-width: -webkit-max-content;
+    min-width: max-content;
+    transform: none;
+  }
   .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu {
     display: block;
     margin-top: 0;
@@ -1268,6 +1294,13 @@ body.page .main-navigation {
   }
 }
 
+.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu.hidden-links {
+  right: 0;
+  width: 100%;
+  display: table;
+  position: absolute;
+}
+
 .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu.hidden-links {
   right: 0;
   width: 100%;
@@ -1276,6 +1309,12 @@ body.page .main-navigation {
 }
 
 @media only screen and (min-width: 768px) {
+  .main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu.hidden-links {
+    left: 0;
+    right: auto;
+    display: block;
+    width: max-content;
+  }
   .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu.hidden-links {
     left: 0;
     right: auto;
@@ -1284,10 +1323,24 @@ body.page .main-navigation {
   }
 }
 
+.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .submenu-expand {
+  display: none;
+}
+
 .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .submenu-expand {
   display: none;
 }
 
+.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu {
+  display: block;
+  margin-top: inherit;
+  position: relative;
+  width: 100%;
+  right: 0;
+  opacity: 1;
+  /* Non-mobile position */
+}
+
 .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu {
   display: block;
   margin-top: inherit;
@@ -1299,16 +1352,31 @@ body.page .main-navigation {
 }
 
 @media only screen and (min-width: 768px) {
+  .main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu {
+    float: none;
+    max-width: 100%;
+  }
   .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu {
     float: none;
     max-width: 100%;
   }
 }
 
+.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu {
+  counter-reset: submenu;
+}
+
 .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu {
   counter-reset: submenu;
 }
 
+.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu > li > a::before {
+  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  font-weight: normal;
+  content: "– " counters(submenu, "– ", none);
+  counter-increment: submenu;
+}
+
 .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu > li > a::before {
   font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   font-weight: normal;
@@ -4198,16 +4266,10 @@ body.page .main-navigation {
 }
 
 @media only screen and (min-width: 768px) {
-  .entry .entry-content .wp-block-media-text {
-    grid-template-columns: 60% auto;
-  }
   .entry .entry-content .wp-block-media-text .wp-block-media-text__content {
     padding-right: 4.5%;
     margin-right: 7.5%;
   }
-  .entry .entry-content .wp-block-media-text.has-media-on-the-right {
-    grid-template-columns: auto 60%;
-  }
   .entry .entry-content .wp-block-media-text.alignfull + .wp-block-media-text {
     margin-top: -44px;
   }

sophisticated-business/style.css

@@ -4278,16 +4278,10 @@ body.page .main-navigation {
 }
 
 @media only screen and (min-width: 768px) {
-  .entry .entry-content .wp-block-media-text {
-    grid-template-columns: 60% auto;
-  }
   .entry .entry-content .wp-block-media-text .wp-block-media-text__content {
     padding-left: 4.5%;
     margin-left: 7.5%;
   }
-  .entry .entry-content .wp-block-media-text.has-media-on-the-right {
-    grid-template-columns: auto 60%;
-  }
   .entry .entry-content .wp-block-media-text.alignfull + .wp-block-media-text {
     margin-top: -44px;
   }