accordion improved styles

src/components/accordion-item/accordion-item.scss

@@ -37,6 +37,7 @@
     }
   }
   .hy-accordion__button {
+    @include font-size(22px, 28px);
     align-items: center;
     border: none;
     background-color: var(--grayscale-background-box);
@@ -44,13 +45,11 @@
     display: flex;
     flex-direction: row;
     font-family: var(--main-font-family);
-    font-size: 26px;
-    line-height: 32px;
-    letter-spacing: -0.82px;
-    font-weight: 600;
+    font-weight: bold;
     height: 100%;
     justify-content: flex-start;
-    padding: 0.75rem 1.75rem 0.75rem 1.25rem;
+    letter-spacing: -0.7px;
+    padding: 1.125rem 1rem 1.125rem 1rem;
     transition: all 0.35s ease-in;
     width: 100%;
 
@@ -58,10 +57,10 @@
       cursor: pointer;
     }
 
-    @include breakpoint($medium) {
-      font-size: 26px;
-      letter-spacing: -0.82px;
-      line-height: 32px;
+    @include breakpoint($narrow) {
+      @include font-size(26px, 32px);
+      letter-spacing: -0.8px;
+      padding: 1rem 2rem 1rem 1.25rem;
     }
 
     &[aria-expanded='true'] {
@@ -70,11 +69,20 @@
   }
 
   .hy-accordion--heading__icon {
-    margin-right: 0.95rem;
+    margin-right: 0.5rem;
     z-index: 0;
 
+    @include breakpoint($narrow) {
+      margin-right: 1rem;
+    }
+
     svg {
       fill: var(--brand-main);
+
+      @include breakpoint($narrow) {
+        height: 24px;
+        width: 24px;
+      }
     }
   }
 }
@@ -89,4 +97,10 @@
   &--inner-wrapper {
     display: block;
   }
+
+  hy-box {
+    @include breakpoint($narrow) {
+      padding: 0 2rem;
+    }
+  }
 }

src/components/accordion-item/accordion-item.tsx

@@ -3,7 +3,7 @@ import {Component, Listen, Prop, State, Element, h} from '@stencil/core';
 @Component({
   tag: 'hy-accordion-item',
   styleUrl: 'accordion-item.scss',
-  shadow: false
+  shadow: false,
 })
 export class AccordionItem {
   @Element() el: HTMLElement;
@@ -208,7 +208,7 @@ export class AccordionItem {
           aria-hidden="true"
           style={{display: 'none'}}
         >
-          <hy-box pt="1.5" pb="3" pl="2" pr="2">
+          <hy-box pt="0" pb="0" pl="0.75" pr="0.75">
             <div class="hy-accordion__content--inner-wrapper">
               <slot></slot>
             </div>