shortcuts borders fix styles

src/components/hy-shortcuts/hy-shortcuts.scss

@@ -67,12 +67,19 @@
 
     .shortcut-link-wrapper.box-3.first a.shortcut-link,
     .shortcut-link-wrapper.box-4.first a.shortcut-link {
+      // mobile
       border-top: 2.5px solid var(--brand-main-nearly-black);
+
+      @include breakpoint($medium) {
+        // tablet
+        border-top: 3px solid var(--brand-main-nearly-black);
+      }
     }
 
     a.shortcut-link {
       align-items: center;
       background-color: transparent;
+      // mobile
       border-bottom: 2.5px solid var(--brand-main-nearly-black);
       color: var(--brand-main-nearly-black);
       cursor: pointer;
@@ -89,6 +96,7 @@
       text-decoration: none;
 
       @include breakpoint($medium) {
+        // tablet
         border-bottom: 3px solid var(--brand-main-nearly-black);
         border-top: 3px solid var(--brand-main-nearly-black);
         font-size: 16px;

src/index.html

@@ -245,6 +245,16 @@
           <a href="#this-is-an-accordion-item-3--title">Click here to go to Accordion Item 3</a>
         </section>
 
+        <hy-shortcuts
+          list-heading="Shortcuts list heading number one"
+          data-items='[
+  {"heading":"3500 h","url":"https://yle.fi"},
+  {"heading":"Example link label one","url":"https://yle.fi"},
+  {"heading":"Example link label two. Very Long label indeed to test if it fits.", "url":"https://yle.fi"},
+  {"heading":"Example link label three", "url":"https://yle.fi"}]'
+        >
+        </hy-shortcuts>
+
         <hy-banner
           text-title="Check upcoming conferences"
           text-description="Take advantage of our curated list of high profile conferences near Helsinki and in the Nordics."