diff --git a/src/components/courses/hy-content-list-item/hy-content-list-item.scss b/src/components/courses/hy-content-list-item/hy-content-list-item.scss
index c60f2e28b7490ff94dc310c2f4301b578a5aa23f..42cb4698d58773630cb6cc28ec4832adfa93da21 100644
--- a/src/components/courses/hy-content-list-item/hy-content-list-item.scss
+++ b/src/components/courses/hy-content-list-item/hy-content-list-item.scss
@@ -86,17 +86,24 @@
   }
 
   &--metadata {
+    @include font-size(14px, 16px);
+    @include font-weight($semibold);
+
+    color: var(--grayscale-black);
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-
-    color: var(--grayscale-black);
-    @include font-size(14px, 16px);
-    @include font-weight($semibold);
     letter-spacing: -0.44px;
     line-height: 16px;
-
     margin-bottom: 19px;
+    padding-bottom: 0;
+
+    @include breakpoint($narrow) {
+      padding-bottom: 1rem;
+    }
+    @include breakpoint($extrawide) {
+      padding-bottom: 0;
+    }
 
     &--item:after {
       content: '|';