Updated style for <GuideSection::Subsection> component

Author: ijlee2

app/components/guide-section/subsection.css

@@ -0,0 +1,64 @@
+/* Title */
+.title-container {
+  align-items: center;
+  border-bottom: 1px solid #E04E39;
+  display: grid;
+  grid-gap: 0 1rem;
+  grid-template-areas:
+    "permalink title";
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto;
+}
+
+.title {
+  grid-area: title;
+  word-break: break-word;
+}
+
+.permalink {
+  grid-area: permalink;
+  text-decoration: none;
+}
+
+.description {
+  margin-top: 0.5rem;
+}
+
+/* Code examples */
+.code-examples-container {
+  display: grid;
+  grid-gap: 1rem 0;
+  grid-template-areas:
+    "ember-classic"
+    "ember-octane";
+  grid-template-columns: 1fr;
+  grid-template-rows: auto auto;
+  margin-top: 1.75rem;
+}
+
+.ember-classic {
+  grid-area: ember-classic;
+  overflow-x: auto;
+  width: 100%;
+}
+
+.ember-octane {
+  grid-area: ember-octane;
+  overflow-x: auto;
+  width: 100%;
+}
+
+.code-examples-container[data-container-query-wide] {
+  grid-gap: 0 2.5rem;
+  grid-template-areas:
+    "ember-classic ember-octane";
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto;
+}
+
+/* Edit link */
+.edit-link-container {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 1rem;
+}

app/components/guide-section/subsection.hbs

@@ -5,35 +5,47 @@
   as |subsectionId subsectionTitle subsectionDescription|
 }}
   <section
-    data-test-subsection={{subsectionTitle}}
     aria-labelledby="{{@sectionId}}__{{subsectionId}}"
+    data-test-subsection={{subsectionTitle}}
   >
-    <h3
-      data-test-field="Subsection Title"
-      id="{{@sectionId}}__{{subsectionId}}"
-    >
-      <a href="#{{@sectionId}}__{{subsectionId}}" title={{subsectionTitle}} class="permalink">
-        {{t "component.guide-section.section"}}
-      </a>
-      {{subsectionTitle}}
+    <div local-class="title-container">
+      <h3
+        data-test-field="Subsection Title"
+        id="{{@sectionId}}__{{subsectionId}}"
+        local-class="title"
+      >
+        {{subsectionTitle}}
+      </h3>
+
       <a
-        class="edit-translation-link"
-        data-test-link="Edit Translation"
-        href="https://github.com/ember-learn/ember-octane-vs-classic-cheat-sheet/edit/main/translations/{{@sectionId}}/{{subsectionId}}/{{this.intl.locale}}.yaml"
-        rel="noopener noreferrer"
-        target="_blank"
+        href="#{{@sectionId}}__{{subsectionId}}"
+        local-class="permalink"
+        title={{subsectionTitle}}
       >
-        {{t "component.guide-section.edit-translation-text"}}
+        {{t "component.guide-section.section"}}
       </a>
-    </h3>
+    </div>
 
-    <p data-test-field="Subsection Description">
+    <p
+      data-test-field="Subsection Description"
+      local-class="description"
+    >
       {{subsectionDescription}}
     </p>
 
-    <div class="grid">
-      <div data-test-ember-classic>
-        <h4>{{t "component.guide-section.subsection.classic"}}</h4>
+    <ContainerQuery
+      @features={{hash
+        wide=(cq-width min=900)
+      }}
+      local-class="code-examples-container"
+    >
+      <div
+        data-test-ember-classic
+        local-class="ember-classic"
+      >
+        <h4 local-class="subtitle">
+          {{t "component.guide-section.subsection.classic"}}
+        </h4>
 
         {{#each @subsection.classicFiles as |file|}}
           <CodeSnippet
@@ -48,8 +60,13 @@
         {{/if}}
       </div>
 
-      <div data-test-ember-octane>
-        <h4>{{t "component.guide-section.subsection.octane"}}</h4>
+      <div
+        data-test-ember-octane
+        local-class="ember-octane"
+      >
+        <h4 local-class="subtitle">
+          {{t "component.guide-section.subsection.octane"}}
+        </h4>
 
         {{#each @subsection.octaneFiles as |file|}}
           <CodeSnippet
@@ -63,6 +80,18 @@
           </p>
         {{/if}}
       </div>
+    </ContainerQuery>
+
+    <div local-class="edit-link-container">
+      <a
+        data-test-link="Edit Translation"
+        href="https://github.com/ember-learn/ember-octane-vs-classic-cheat-sheet/edit/main/translations/{{@sectionId}}/{{subsectionId}}/{{this.intl.locale}}.yaml"
+        local-class="edit-link"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        {{t "component.guide-section.edit-translation-text"}}
+      </a>
     </div>
   </section>
 {{/let}}