Media & Text block: Fix nested Media & Text block media position issu…

…e with increased CSS specificity (#62184)

* Refactor media-text layout styles

* Update media-text alignment styles to support nested media-text blocks

* Update media-text layout for mobile view

Co-authored-by: amitraj2203 <amitraj2203@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>

packages/block-library/src/media-text/style.scss

@@ -15,35 +15,36 @@
 }
 
 .wp-block-media-text.is-vertically-aligned-top {
-	.wp-block-media-text__content,
-	.wp-block-media-text__media {
+	> .wp-block-media-text__content,
+	> .wp-block-media-text__media {
 		align-self: start;
 	}
 }
+
 .wp-block-media-text,
 .wp-block-media-text.is-vertically-aligned-center {
-	.wp-block-media-text__content,
-	.wp-block-media-text__media {
+	> .wp-block-media-text__content,
+	> .wp-block-media-text__media {
 		align-self: center;
 	}
 }
 
 .wp-block-media-text.is-vertically-aligned-bottom {
-	.wp-block-media-text__content,
-	.wp-block-media-text__media {
+	> .wp-block-media-text__content,
+	> .wp-block-media-text__media {
 		align-self: end;
 	}
 }
 
-.wp-block-media-text .wp-block-media-text__media {
+.wp-block-media-text > .wp-block-media-text__media {
 	/*!rtl:begin:ignore*/
 	grid-column: 1;
 	grid-row: 1;
 	/*!rtl:end:ignore*/
 	margin: 0;
 }
 
-.wp-block-media-text .wp-block-media-text__content {
+.wp-block-media-text > .wp-block-media-text__content {
 	direction: ltr;
 	/*!rtl:begin:ignore*/
 	grid-column: 2;
@@ -53,14 +54,14 @@
 	word-break: break-word;
 }
 
-.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
+.wp-block-media-text.has-media-on-the-right > .wp-block-media-text__media {
 	/*!rtl:begin:ignore*/
 	grid-column: 2;
 	grid-row: 1;
 	/*!rtl:end:ignore*/
 }
 
-.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
+.wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content {
 	/*!rtl:begin:ignore*/
 	grid-column: 1;
 	grid-row: 1;
@@ -107,11 +108,11 @@
 @media (max-width: #{ ($break-small) }) {
 	.wp-block-media-text.is-stacked-on-mobile {
 		grid-template-columns: 100% !important;
-		.wp-block-media-text__media {
+		> .wp-block-media-text__media {
 			grid-column: 1;
 			grid-row: 1;
 		}
-		.wp-block-media-text__content {
+		> .wp-block-media-text__content {
 			grid-column: 1;
 			grid-row: 2;
 		}