Updated style for <GuideSection> component

Author: ijlee2

app/components/guide-section.css

@@ -0,0 +1,34 @@
+.title-container {
+  align-items: center;
+  background-color: #1C304A;
+  display: grid;
+  grid-gap: 0 1rem;
+  grid-template-areas:
+    "permalink title";
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto;
+  margin-left: -2rem;
+  padding: 1rem 2rem;
+  width: fit-content;
+  width: -moz-fit-content; /* Firefox */
+}
+
+.title {
+  color: #F1F1F1;
+  grid-area: title;
+  word-break: break-word;
+}
+
+.permalink {
+  color: #C1C1C1;
+  grid-area: permalink;
+  text-decoration: none;
+}
+
+.subsection-container {
+  margin-top: 2rem;
+}
+
+.subsection-container ~ .subsection-container {
+  margin-top: 3rem;
+}

app/components/guide-section.hbs

@@ -4,24 +4,34 @@
   as |sectionId sectionTitle|
 }}
   <section
-    data-test-section={{sectionTitle}}
     aria-labelledby={{sectionId}}
+    data-test-section={{sectionTitle}}
   >
-    <h2
-      data-test-field="Section Title"
-      id={{sectionId}}
-    >
-      <a href="#{{sectionId}}" title={{sectionTitle}} class="permalink">
+    <div local-class="title-container">
+      <h2
+        data-test-field="Section Title"
+        id={{sectionId}}
+        local-class="title"
+      >
+        {{sectionTitle}}
+      </h2>
+
+      <a
+        href="#{{sectionId}}"
+        local-class="permalink"
+        title={{sectionTitle}}
+      >
         {{t "component.guide-section.section"}}
       </a>
-      {{sectionTitle}}
-    </h2>
+    </div>
 
     {{#each @section.subsections as |subsection|}}
-      <GuideSection::Subsection
-        @sectionId={{sectionId}}
-        @subsection={{subsection}}
-      />
+      <div local-class="subsection-container">
+        <GuideSection::Subsection
+          @sectionId={{sectionId}}
+          @subsection={{subsection}}
+        />
+      </div>
     {{/each}}
   </section>
 {{/let}}