Update item type indicator in mobile

src/components/hy-general-list-item/hy-general-list-item.scss

@@ -23,7 +23,7 @@
 
   &:hover,
   &:focus {
-    .hy-general-list-item__type {
+    .hy-general-list-item__type span {
       background-color: var(--brand-main);
     }
 
@@ -41,6 +41,10 @@
   position: relative;
   width: 100%;
 
+  @include breakpoint(max-width 479px) {
+    display: none;
+  }
+
   @include breakpoint($narrow) {
     max-width: 35.7%;
   }
@@ -67,16 +71,33 @@
 }
 
 .hy-general-list-item__type {
-  @include font-size(12px, 14px);
-  @include font-weight($bold);
-  background-color: var(--grayscale-black);
-  color: #ffffff;
-  left: -8px;
-  letter-spacing: -0.1px;
-  padding: 5px 8px;
-  position: absolute;
-  text-transform: uppercase;
-  top: 16px;
+  background-color: var(--grayscale-background-box);
+  padding-top: 16px;
+  z-index: 10;
+
+  @include breakpoint($narrow) {
+    background-color: transparent;
+    left: -8px;
+    padding-top: 0;
+    position: absolute;
+    top: 16px;
+  }
+
+  span {
+    @include font-size(12px, 14px);
+    @include font-weight($bold);
+    background-color: var(--grayscale-black);
+    color: #ffffff;
+    letter-spacing: -0.1px;
+    padding: 5px 8px;
+    text-transform: uppercase;
+    align-self: baseline;
+    margin-left: -8px;
+
+    @include breakpoint($narrow) {
+      margin-left: 0;
+    }
+  }
 }
 
 .hy-general-list-item__text-container {

src/components/hy-general-list-item/hy-general-list-item.tsx

-import {Component, Element, h, Listen, Prop} from '@stencil/core';
-
-let keys = {
-  enter: 'Enter',
-};
+import {Component, Element, h, Prop} from '@stencil/core';
 
 @Component({
   tag: 'hy-general-list-item',
@@ -35,9 +31,11 @@ export class HyGeneralListItem {
     return (
       <article class={classAttributes}>
         <a class="hy-general-list-item__link" href={this.url} target="_blank">
+          <div class="hy-general-list-item__type">
+            <span>{this.label}</span>
+          </div>
           <figure class={imageClassAttributes} style={aspectRatio}>
             <img alt={this.imageAlt} class="hy-general-list-item__image" src={this.imageUrl} />
-            <span class="hy-general-list-item__type">{this.label}</span>
           </figure>
           <div class={contentClassAttributes}>
             <h3 class="hy-general-list-item__title">{this.itemTitle}</h3>