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

@@ -693,13 +693,26 @@ button,
         background-color: var(--color-bg-primary)
 
   .training-group-item-content-detail
-    +margin(auto, x)
     width: 100%
 
+    .cards-item-title
+      font-size: var(--fs-h4)
+      line-height: var(--lh-base)
+
+    +media-lg
+      .training-group-item-content-detail-inner
+        max-width: 114.0rem
+
     +media-xl
-      max-width: var(--container-width)
       width: calc(100% - var(--training-group-item-nav-width))
 
+      .cards
+        --cards-items-per-row: 4
+
+    +media-xxl
+      .cards
+        --cards-items-per-row: 5
+
     // TODO: revise training-group-item-nav display toggle on medium and small screens
   .training-group-item-nav
     +margin(3, bottom)

common/static/common/styles/studio/_web-assets-overrides.sass

@@ -168,6 +168,10 @@ textarea
 
 /* Grid. */
 // TODO: consider moving to web-assets
+.container-fluid
+  .row
+    +margin(0, x)
+
 .row
   width: 100%
 

training/templates/training/chapter.html

@@ -20,6 +20,7 @@
 
 {% block nexted_content %}
   <div class="training-group-item-content-detail">
+    <div class="training-group-item-content-detail-inner">
       {% if chapter.thumbnail %}
          <div class="row mb-3">
            <div class="col">
@@ -66,14 +67,14 @@
 
        {% if chapter.description %}
          <section class="mb-3 row">
-        <div class="col col-lg-9">
+           <div class="col">
              <div class="markdown-text">
                {% with_shortcodes chapter.description|markdown %}
              </div>
            </div>
          </section>
        {% endif %}
-
+    </div>
     <div class="mb-3 row">
       <div class="col-12">
         <div class="cards card-layout-card-transparent files">

training/templates/training/training.html

@@ -14,7 +14,7 @@
 {% block nexted_content %}
 
 <section class="training-group-item training-group-item-content-detail">
-  <div class="row">
+  <div class="row training-group-item-content-detail-inner">
     <div class="col">
       <div class="mb-3 row">
         <div class="col">
@@ -74,7 +74,7 @@
         {% endif %}
 
         <section class="row">
-          <div class="col-12 col-lg-9">
+          <div class="col-12">
             <div class="markdown-text">
               {% with_shortcodes training.summary_rendered %}
             </div>