keyboard onEnter open the card; style changes

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

@@ -77,7 +77,7 @@
   }
 
   &--description {
-    @include font-size(14px, 18px);
+    @include font-size(14px, 20px);
     color: var(--grayscale-dark);
     letter-spacing: -0.08px;
   }

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

-import {Component, h, Prop} from '@stencil/core';
+import {Component, Element, h, Listen, Prop} from '@stencil/core';
+
+let keys = {
+  enter: 'Enter',
+};
 
 @Component({
   tag: 'hy-general-list-item',
@@ -14,6 +18,17 @@ export class HyGeneralListItem {
   @Prop() imageUrl: string = null;
   @Prop() imageAlt: string = '';
 
+  @Element() el: HTMLElement;
+
+  @Listen('keydown')
+  handleKeyDown(event) {
+    const key = (event as KeyboardEvent).code;
+    if (key == keys.enter) {
+      let card = this.el;
+      window.open(card.dataset.location, '_blank');
+    }
+  }
+
   render() {
     const classAttributes = ['hy-general-list-item'].join(' ');
 
@@ -23,8 +38,8 @@ export class HyGeneralListItem {
 
     //const target = '_blank';
     //const ariaLabel = 'Link points outside the current website.';
-    const aspectRatioWidth = 6;
-    const aspectRatioHeight = 4;
+    const aspectRatioWidth = 16;
+    const aspectRatioHeight = 10;
     const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;
     const aspectRatio = {
       '--aspectRatio': `${aspect}%` as 'aspectRatio',