feat: change button design, change textpic mobile layout

packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html

@@ -5,16 +5,6 @@
   <f:asset.css identifier="CBTextImage" href="{cb:assetPath()}/frontend.css" />
 
   <div class="textimage-container image-pos-{data.imageorient}">
-    <div class="textimage-wrapper">
-      <f:if condition="{data.header}">
-        <h2 class="textimage-header">{data.header}</h2>
-      </f:if>
-      <f:if condition="{data.bodytext}">
-        <div class="textimage-text">
-          <f:format.html>{data.bodytext}</f:format.html>
-        </div>
-      </f:if>
-    </div>
     <div class="textimage-image-wrapper">
       <f:if condition="{data.image}">
         <f:then>
@@ -25,5 +15,15 @@
         </f:else>
       </f:if>
     </div>
+    <div class="textimage-wrapper">
+      <f:if condition="{data.header}">
+        <h2 class="textimage-header">{data.header}</h2>
+      </f:if>
+      <f:if condition="{data.bodytext}">
+        <div class="textimage-text">
+          <f:format.html>{data.bodytext}</f:format.html>
+        </div>
+      </f:if>
+    </div>
   </div>
 </f:section>

packages/base/Resources/Public/Scss/components/_buttons.scss

@@ -1,8 +1,8 @@
 .btn {
   background-color: var(--bs-primary);
   color: var(--bs-yellow);
-  font-family: 'Hajime Sans', sans-serif;
-  border-radius: 2rem;
+  font-family: 'Inter', sans-serif;
+  border-radius: .5rem;
   padding: 0.75rem 1.5rem;
   border: none;
   cursor: pointer;

packages/base/Resources/Public/Scss/components/_news.scss

@@ -3,6 +3,7 @@
   grid-template-columns: repeat(6, 1fr);
   gap: 1rem;
   grid-auto-rows: auto;
+  margin-bottom: 1rem; /* Ensure space below the news list */
 
   .news-list-item {
       grid-column: span 6;
@@ -131,9 +132,9 @@
   }
 }
 
-/* Show mobile button only below desktop breakpoint, add space above */
+/* Show mobile button only below desktop breakpoint, inline-block and margin-top */
 .mobile-btn {
-  margin-top: 2rem; /* Added space between the news list and the show all button */
+  display: inline-block;
   @media (min-width: $breakpoint-lg) {
     display: none;
   }