Hero Patch for flex-direction vis diff items. (#620)

* hero flex direction only when .hero-details is present

* changeset added

* opting to remove block completely.

* Updating markup

* Adding changeset for site

* updating description and changeset

* Update early-experts-wave.md

* Update early-experts-wave.md

* Update hero.md

Bens Suggestion

* Update new-pets-speak.md

* Update hero.md

* Update hero.md again

Text didnt get updated properly

.changeset/early-experts-wave.md

@@ -0,0 +1,5 @@
+---
+'@microsoft/atlas-site': patch
+---
+
+Updated markup for hero-details. Removing an unneeded class and adding an atomic for the hero-details use case.

.changeset/new-pets-speak.md

@@ -0,0 +1,5 @@
+---
+'@microsoft/atlas-css': patch
+---
+
+Removed explicit flex-direction from the hero component in favor of atomics.

css/src/components/hero.scss

@@ -25,10 +25,6 @@ $hero-image-width-widescreen: calc((100% - 2 * $layout-widescreen-gap) * 0.55) !
 	align-items: stretch;
 	justify-content: space-between;
 
-	@include tablet {
-		flex-direction: row;
-	}
-
 	.hero-content {
 		z-index: $zindex-active;
 		padding-block: $hero-padding-sm;

site/src/components/hero.md

@@ -116,11 +116,11 @@ On pages with right to left direction, the position of the hero image will remai
 
 Hero images with details
 
-This component variant overlays a container on the opposite side of the hero content. It can be used to accommodate more content within the hero section if necessary.
+This component variant overlays a container on the opposite side of the hero content. It can be used to accommodate more content within the hero section if necessary.  Note that to lay out the hero's children correctly across screen sizes, the hero component should also have the `.flex-direction-row-tablet` atomic.
 
 ```html-no-indent
 <section
-    class="hero hero-image hero-with-details border background-color-body-accent gradient-border-right gradient-border-body-accent"
+    class="hero hero-image flex-direction-row-tablet border background-color-body-accent gradient-border-right gradient-border-body-accent"
 	style="
         --hero-background-image-light: url('https://learn.microsoft.com/en-us/media/learn/plans/skilling_plan_hero.png?branch=main');
 		--hero-background-image-dark: url('https://learn.microsoft.com/en-us/media/learn/plans/skilling_plan_hero.png?branch=main');

site/src/patterns/hero.md

@@ -52,12 +52,11 @@ Hero with a theme-aware companion image.
 ```
 
 ## Accent hero with details
-
-This component variant, known as 'Accent Hero with Details', overlays an element on top of the hero's image.
+This component variant, known as 'Accent Hero with Details', overlays an element on top of the hero's image. Note that to lay out the hero's children correctly across screen sizes, the hero component should also have the `.flex-direction-row-tablet` atomic.
 
 ```html-no-indent
 <section
-    class="hero hero-image hero-with-details border background-color-body-accent gradient-border-right gradient-border-body-accent"
+    class="hero hero-image flex-direction-row-tablet border background-color-body-accent gradient-border-right gradient-border-body-accent"
     style="
         --hero-background-image-light: url('https://learn.microsoft.com/en-us/media/learn/plans/skilling_plan_hero.png?branch=main');
 		--hero-background-image-dark: url('https://learn.microsoft.com/en-us/media/learn/plans/skilling_plan_hero.png?branch=main');