common/static/common/styles/studio/_custom.sass

@@ -670,12 +670,27 @@ button,
   .training-group-item
     +padding(3, x)
 
-  .training-group-item-content
+    &:last-child
-    @extend .box
+      +media-xl
+        padding-right: 0
 
-    background-color: var(--color-bg-tertiary)
+  .training-group-item-content
     width: var(--training-group-item-content-width)
 
+    .box
+      background-color: var(--color-bg-tertiary)
+
+      .comment-input-div
+        &.form-control
+          background-color: var(--color-bg-primary)
+
+      .replies
+        .comment
+          background-color: var(--color-bg-secondary)
+
+      .top-level-comment
+        background-color: var(--color-bg-primary)
+
   // TODO: revise training-group-item-nav display toggle on medium and small screens
   .training-group-item-nav
     +margin(3, bottom)

training/templates/training/section.html

@@ -51,47 +51,49 @@
     {% endif %}
   </div>
   <div class="training-group-item training-group-item-content">
-    <div class="row">
+    <div class="box">
-      <div class="col">
+      <div class="row">
-        <div class="row">
+        <div class="col">
-          <div class="col mb-2 mb-md-3">
+          <div class="row">
-            <div class="d-md-block d-none">
+            <div class="col mb-2 mb-md-3">
-              <p class="small text-muted">{{ chapter.name }}</p>
+              <div class="d-md-block d-none">
-              <h2>{{ section.name }}</h2>
+                <p class="small text-muted">{{ chapter.name }}</p>
+                <h2>{{ section.name }}</h2>
+              </div>
+              <div class="text-muted x-sm">
+                <p class="d-inline me-2">{{ section.date_created|date:"N jS, Y" }}</p>
+                {% if section.static_asset.license %}
+                  <a href="{{ section.static_asset.license.url }}" target="_blank" class="d-inline me-2 text-muted" data-bs-toggle="tooltip" data-placement="bottom" title="{{ section.static_asset.license.description }}">
+                    <i class="i-info"></i>
+                    {{ section.static_asset.license }}
+                  </a>
+                {% endif %}
+                {% if section.is_free %}
+                  {% include "common/components/cards/pill.html" with label='Free' %}
+                {% endif %}
+              </div>
             </div>
-            <div class="text-muted x-sm">
+            <div class="col-12 col-md-auto mb-2 mb-md-0 mt-0 mt-md-3">
-              <p class="d-inline me-2">{{ section.date_created|date:"N jS, Y" }}</p>
+              {% include "common/components/navigation/buttons_toolbar.html" with item=section %}
-              {% if section.static_asset.license %}
-                <a href="{{ section.static_asset.license.url }}" target="_blank" class="d-inline me-2 text-muted" data-bs-toggle="tooltip" data-placement="bottom" title="{{ section.static_asset.license.description }}">
-                  <i class="i-info"></i>
-                  {{ section.static_asset.license }}
-                </a>
-              {% endif %}
-              {% if section.is_free %}
-                {% include "common/components/cards/pill.html" with label='Free' %}
-              {% endif %}
             </div>
           </div>
-          <div class="col-12 col-md-auto mb-2 mb-md-0 mt-0 mt-md-3">
+          <div class="row mb-2">
-            {% include "common/components/navigation/buttons_toolbar.html" with item=section %}
+            {% if section.static_asset.author_image_url  %}
-          </div>
+              <div style="background-image:url('{{ section.static_asset.author_image_url }}');" class="ms-2 profile-avatar"></div>
-        </div>
+            {% else %}
-        <div class="row mb-2">
+              <div style="background-image:url('{% static 'common/images/blank-profile-pic.png' %}');" class="ms-2 profile-avatar">
-          {% if section.static_asset.author_image_url  %}
+              </div>
-            <div style="background-image:url('{{ section.static_asset.author_image_url }}');" class="ms-2 profile-avatar"></div>
+            {% endif %}
-          {% else %}
-            <div style="background-image:url('{% static 'common/images/blank-profile-pic.png' %}');" class="ms-2 profile-avatar">
-            </div>
-          {% endif %}
 
-          {% include 'common/components/cards/card_profile.html' with user=section.static_asset.user title="Publisher" %}
+            {% include 'common/components/cards/card_profile.html' with user=section.static_asset.user title="Publisher" %}
+          </div>
+          <section class="mb-3 markdown-text">
+            {% with_shortcodes section.text|markdown_unsafe %}
+          </section>
+          <section class="mb-3">
+            {% include 'comments/components/comment_section.html' %}
+          </section>
         </div>
-        <section class="mb-3 markdown-text">
-          {% with_shortcodes section.text|markdown_unsafe %}
-        </section>
-        <section class="mb-3">
-          {% include 'comments/components/comment_section.html' %}
-        </section>
       </div>
     </div>
   </div>