apps/cms: fix multiple block styling issues

- fix non-matching paddings and margins for background cta block
- fix broken styling on mobile for usecase block

fixes #1760

adhocracy-plus/assets/scss/components/_blocks.scss

@@ -146,33 +146,25 @@ $block-padding-md: 7.5 * $padding;
     color: $text-color-inverted;
 }
 
-// linked for specificty
+// linked for specificity
 .btn.btn--transparent.block-bg__btn--1 {
     border-color: $text-color;
 }
 
-// linked for specificty
+// linked for specificity
 .btn.btn--transparent.block-bg__btn--2 {
     @extend .btn--text-color-inverted;
 }
 
 .block-background_cta_block {
     background-color: $body-bg;
-    margin-left: -$r-spacer;
-    margin-right: -$r-spacer;
+    margin-left: -0.25 * $r-spacer;
+    margin-right: -0.25 * $r-spacer;
     padding-left: $padding;
     padding-right: $padding;
     text-align: center;
 
-    @media screen and (min-width: $breakpoint-xxl) {
-        margin-left: 0;
-        margin-right: 0;
-    }
-
     .block {
-        border-top: 2 * $r-spacer solid $body-bg;
-        border-bottom: 2 * $r-spacer solid $body-bg;
-
         h2:after {
             border-bottom: none;
         }

apps/cms/use_cases/templates/a4_candy_cms_use_cases/blocks/use_cases_block.html

@@ -1,38 +1,38 @@
 {% load wagtailcore_tags wagtailimages_tags i18n %}
-<div class="block-usecase row justify-content-md-center">
-
-    <div class="col-12">
-        <h2 class="cms__title--serif cms__title--underlined text-center">{{ value.title }}</h2>
+<div class="block-usecase container">
+    <div class="row">
+        <div class="col-12">
+            <h2 class="cms__title--serif cms__title--underlined text-center">{{ value.title }}</h2>
+        </div>
     </div>
-    <div class="col-12 col-lg-10">
-        <div class="row justify-content-md-center">
-            {% for use_case in value.use_cases %}
-            <div class="col-12 col-md-4 col-lg-3 cms-use-case__tile">
+    <div class="row justify-content-center">
+        {% for use_case in value.use_cases %}
+            <div class="col-12 col-md-4 col-lg-4 cms-use-case__tile">
                 <a class="cms__tile-link" href="{% pageurl use_case %}">
                     {% if use_case.image %}
-                    {% image use_case.image fill-500x350 as image %}
-                    <img src="{{ image.url }}" alt="{{ image.alt }}" />
+                        {% image use_case.image fill-500x350 as image %}
+                        <img src="{{ image.url }}" alt="{{ image.alt }}" />
                     {% endif %}
                     <div class="cms__text pt-4 text-muted cms__text--serif">
-                    {% blocktranslate with category=use_case.get_category_display %}For {{ category }}{% endblocktranslate %}
+                        {% blocktranslate with category=use_case.get_category_display %}For {{ category }}{% endblocktranslate %}
                     </div>
                     <h3 class="cms__title--bold">{{ use_case.subtitle }}</h3>
                 </a>
             </div>
-            {% endfor %}
-        </div>
-    </div>
-
-    {% if value.demo_platform %}
-    <div class="col-12 col-sm-6 col-lg-3">
-        <a class="btn btn--full btn--transparent" href="{{ value.demo_platform }}">{% translate 'Visit Demosite' %}</a>
+        {% endfor %}
     </div>
-    {% endif %}
-
-    {% if value.use_case_page %}
-    <div class="col-12 col-sm-6 col-lg-3">
-        <a class="btn btn--full btn--transparent" href="{{ value.use_case_page.url }}">{% translate 'View more examples' %}</a>
+    <div class="row justify-content-center">
+        {% if value.demo_platform %}
+            <div class="col-12 col-lg-4 d-flex justify-content-center">
+                <a class="btn btn--full btn--transparent"
+                   href="{{ value.demo_platform }}">{% translate "Visit Demosite" %}</a>
+            </div>
+        {% endif %}
+        {% if value.use_case_page %}
+            <div class="col-12 col-lg-4 d-flex justify-content-center">
+                <a class="btn btn--full btn--transparent"
+                   href="{{ value.use_case_page.url }}">{% translate "View more examples" %}</a>
+            </div>
+        {% endif %}
     </div>
-    {% endif %}
-
 </div>

changelog/1760.md

@@ -0,0 +1,4 @@
+### Fixed
+
+- fixed non-matching padding between background cta block and others
+- fixed broken mobile styling for usecase black