From f9650549c8bd3b1a409eea93d3ae5dd13362930d Mon Sep 17 00:00:00 2001
From: LasseStaus <l.stausgaard@gmail.com>
Date: Mon, 22 Apr 2024 14:08:09 +0200
Subject: [PATCH] Fix CSS for recommended-material

This commit should correct sizing and spacing for the recommended-material, when used both in and outside of a grid.

DDFFORM-490
---
 .../recommended-material-skeleton.scss        | 12 ++++++-----
 .../recommended-material.scss                 | 20 +++++++++----------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/stories/Library/recommended-material/recommended-material-skeleton.scss b/src/stories/Library/recommended-material/recommended-material-skeleton.scss
index b870d53fb..45912f98b 100644
--- a/src/stories/Library/recommended-material/recommended-material-skeleton.scss
+++ b/src/stories/Library/recommended-material/recommended-material-skeleton.scss
@@ -6,7 +6,7 @@
   }
 
   .ssc-square.image-square {
-    height: 216px;
+    height: 100%;
     aspect-ratio: 0.79;
     width: auto;
     justify-self: center;
@@ -16,9 +16,11 @@
     display: flex;
     flex-direction: column;
     gap: 5px;
-    margin-bottom: 12px;
-  }
-  .ssc-line {
-    width: 60%;
+    margin-top: 12px;
+
+    .ssc-line {
+      width: 60%;
+      margin-bottom: 0;
+    }
   }
 }
diff --git a/src/stories/Library/recommended-material/recommended-material.scss b/src/stories/Library/recommended-material/recommended-material.scss
index 7125d1c57..c5f92d6d8 100644
--- a/src/stories/Library/recommended-material/recommended-material.scss
+++ b/src/stories/Library/recommended-material/recommended-material.scss
@@ -1,14 +1,11 @@
 // MATERIAL_LARGE_DESKTOP & MATERIAL_MEDIUM_MOBILE are variables
 // taken from the cover.scss file.
+// Aspect ratio is equal the defined cover value of large in cover.scss.
 $cover_height_small: $MATERIAL_MEDIUM_MOBILE;
 $cover_height_large: $MATERIAL_LARGE_DESKTOP;
+$cover_aspect_ratio: 0.79;
 $_recommended-material-max-height: 432px;
 $_recommended-material-max-width: 378px;
-$_aspect-ratio-mobile: 285 / 320;
-// stylelint-disable-next-line
-$_aspect-ratio-desktop: $_recommended-material-max-width /
-  $_recommended-material-max-height;
-$_material-image-box-shadow: 0 4px 40px rgba(0, 0, 0, 0.45);
 
 .recommended-material {
   background-color: $color__global-secondary;
@@ -18,21 +15,17 @@ $_material-image-box-shadow: 0 4px 40px rgba(0, 0, 0, 0.45);
   padding: $s-md;
   display: grid;
   grid-template-columns: 1fr;
-  grid-template-rows: min-content $cover_height_small min-content;
+  grid-auto-rows: auto $cover_height_large auto;
   row-gap: $s-lg;
   justify-items: center;
   align-items: center;
   align-content: space-between;
-  aspect-ratio: $_aspect-ratio-mobile;
+  aspect-ratio: 0.79;
 
   @include media-query__small {
     padding: $s-lg;
-    aspect-ratio: $_aspect-ratio-desktop;
     max-width: $_recommended-material-max-width;
   }
-  @include media-query__medium {
-    grid-template-rows: min-content $cover_height_large min-content;
-  }
 }
 
 .recommended-material__icon {
@@ -42,6 +35,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,
@@ -62,7 +56,11 @@ $_material-image-box-shadow: 0 4px 40px rgba(0, 0, 0, 0.45);
   border: 1px solid $color__global-tertiary-1;
   aspect-ratio: unset;
 
+  grid-template-rows: min-content $cover_height_small 1fr;
   > .cover {
     height: 100%;
   }
+  @include media-query__small {
+    grid-template-rows: min-content $cover_height_large 1fr;
+  }
 }