tablet and small desktop space between arrow and content inside courses

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: '|';