diff --git a/src/stories/Library/recommended-material/recommended-material-skeleton.scss b/src/stories/Library/recommended-material/recommended-material-skeleton.scss
index c1c508903..b870d53fb 100644
--- a/src/stories/Library/recommended-material/recommended-material-skeleton.scss
+++ b/src/stories/Library/recommended-material/recommended-material-skeleton.scss
@@ -16,6 +16,7 @@
     display: flex;
     flex-direction: column;
     gap: 5px;
+    margin-bottom: 12px;
   }
   .ssc-line {
     width: 60%;
diff --git a/src/stories/Library/recommended-material/recommended-material.scss b/src/stories/Library/recommended-material/recommended-material.scss
index e4e8f76b1..0cf1db3c1 100644
--- a/src/stories/Library/recommended-material/recommended-material.scss
+++ b/src/stories/Library/recommended-material/recommended-material.scss
@@ -12,10 +12,11 @@ $_material-image-box-shadow: 0 4px 40px rgba(0, 0, 0, 0.45);
   background-color: $color__global-secondary;
   max-height: $_recommended-material-max-height;
   width: 100%;
+  height: 100%;
   padding: $s-md;
   display: grid;
   grid-template-columns: 1fr;
-  grid-template-rows: auto 1fr auto;
+  grid-auto-rows: min-content;
   row-gap: $s-lg;
   justify-items: center;
   align-items: center;
@@ -35,6 +36,7 @@ $_material-image-box-shadow: 0 4px 40px rgba(0, 0, 0, 0.45);
 
 .recommended-material__texts {
   justify-self: start;
+  align-self: baseline;
 }
 
 .recommended-material__description,
@@ -53,12 +55,12 @@ $_material-image-box-shadow: 0 4px 40px rgba(0, 0, 0, 0.45);
 .recommended-material--in-grid {
   max-width: unset;
   border: 1px solid $color__global-tertiary-1;
+  aspect-ratio: unset;
 
   > .cover {
-    height: 100%;
+    height: $MATERIAL_LARGE_DESKTOP;
     max-height: $MATERIAL_LARGE_DESKTOP;
     @include media-query__medium {
-      height: $MATERIAL_LARGE_DESKTOP;
       max-height: unset;
     }
   }