block chaper

assets/sass/_theme/_utils.sass

@@ -118,6 +118,12 @@
     $width: calc( (100% + #{$grid-gutter}) / 12 * #{$quantity-on-base} )
     @return #{$width}
 
+// This must be used for offset, inside columns
+@function col-offset($quantity, $base: 12)
+    $quantity-on-base: $quantity / $base * 12
+    $width: calc( (100% + #{$grid-gutter}) / 12 * #{$quantity-on-base} + #{$grid-gutter})
+    @return #{$width}
+
 @function col-outside-container($quantity)
     $responsive-grid-width: Min(100vw, (#{$grid-max-width}))
     @return calc((#{$responsive-grid-width} + #{$grid-gutter} * 2) / 12 * #{$quantity} - #{$grid-gutter} * 2)

assets/sass/_theme/blocks/chapter.sass

@@ -9,19 +9,28 @@
             @extend .small
     picture
         display: block
-        margin-top: $spacing1
     figcaption
         @extend .small
         margin-top: 0.5rem
-
+    .block-content
+        flex-direction: column
+        display: flex
+        .chapter
+            order: 2
+        figure
+            margin-bottom: $spacing1
     @include media-breakpoint-up(md)
+        @include in-page-with-sidebar
+            picture
+                margin-top: $spacing1
         @include in-page-without-sidebar
             .block-content
-                > *
+                flex-direction: row
+                align-items: center
+                .chapter
+                    order: 0
                     width: col(7)
-                    padding-right: $grid-gutter
-            &--with-image
-                .block-content
-                    align-items: center
-                    > *
-                        width: col(6)
+                figure
+                    width: col(4)
+                    margin-left: col-offset(1)
+                    margin-bottom: 0

assets/sass/_theme/design-system/typography.sass

@@ -100,7 +100,8 @@ h2, .h2
 p
     margin-top: 0
     margin-bottom: 0
-
+    + p
+        margin-top: $spacing0
 .meta
     font-family: $meta-font-family
     font-size: $meta-size