From 93b52eb52fa7b39d57d46f6f401b948073e25c41 Mon Sep 17 00:00:00 2001
From: David Sinclair <dsincla@rei.com>
Date: Thu, 26 Dec 2024 16:15:32 -0800
Subject: [PATCH] media-object-refinement

---
 .../styles/vars/CdrMediaObject.vars.scss      | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/components/mediaObject/styles/vars/CdrMediaObject.vars.scss b/src/components/mediaObject/styles/vars/CdrMediaObject.vars.scss
index a7b4c8c07..9cf96df41 100644
--- a/src/components/mediaObject/styles/vars/CdrMediaObject.vars.scss
+++ b/src/components/mediaObject/styles/vars/CdrMediaObject.vars.scss
@@ -2,13 +2,26 @@
 
 $media-object-component: 'media-object';
 
+@mixin media() {
+  & > *:first-child {
+    @content;
+  }
+}
+
+@mixin content() {
+  & > *:last-child {
+    @content;
+  }
+}
+
 // Base mixin for media object
 @mixin cdr-media-object-base-mixin($component) {
-  & > .cdr-#{$component}__media {
+  // & > .cdr-#{$component}__media {
+  @include media {
     grid-area: media;
   }
 
-  & > .cdr-#{$component}__content {
+  @include content {
     grid-area: content;
     container-type: size;
     width: 100%;
@@ -31,7 +44,7 @@ $media-object-component: 'media-object';
 // Allow for media to cover entire container
 @mixin cdr-media-object-cover-mixin($component) {
   &--cover {
-    & > .cdr-#{$component}__media {
+    @include media {
       width: 100%;
       height: 100%;
       display: flex;
@@ -53,7 +66,7 @@ $media-object-component: 'media-object';
   &--overlay {
     position: relative;
 
-    & > .cdr-#{$component}__content {
+    @include content {
       position: absolute;
       left: 0;
       right: 0;
@@ -70,7 +83,7 @@ $media-object-component: 'media-object';
 @mixin cdr-media-object-content-padding-mixin($component) {
   @include cdr-cq-mixin($component, 'content-padding');
 
-  & > .cdr-#{$component}__content {
+  @include content {
     padding: var(--cdr-#{$component}-content-padding);
   }
 }