✨feature: Mobile homepage updates

views/blocks/recent-posts/recent-posts.css

@@ -233,35 +233,92 @@
 
 @media (max-width: 640px) {
     .recent-posts {
-        padding-top: clamp(15.5rem, 64vw, 17rem);
+        padding: 6.25rem 0 3.25rem;
     }
 
     .recent-posts__background {
-        height: clamp(45rem, 192vw, 49rem);
+        height: 30rem;
     }
 
     .recent-posts__vector {
-        min-height: clamp(45rem, 192vw, 49rem);
+        min-height: 30rem;
+        object-position: center top;
     }
 
     .recent-posts__header {
-        margin-bottom: 2rem;
-        text-align: left;
+        gap: 1rem;
+        margin-bottom: 1.75rem;
+        text-align: center;
     }
 
     .recent-posts__heading {
-        font-size: var(--text-54px);
+        font-size: var(--text-40px);
+    }
+
+    .recent-posts__intro {
+        font-size: var(--text-14px);
+        line-height: 1.35;
+        max-width: 20rem;
     }
 
     .recent-posts__grid {
-        grid-template-columns: minmax(0, 397px);
+        grid-template-columns: minmax(0, 18.25rem);
+        margin-inline: auto;
+        max-width: 18.25rem;
     }
 
     .recent-posts__grid::before {
-        top: min(250px, calc(100cqw * 250 / 397));
+        height: 0.75rem;
+        top: min(184px, calc(100cqw * 250 / 397));
+    }
+
+    .recent-posts__card:nth-child(n + 2) {
+        display: none;
+    }
+
+    .recent-posts__image-link {
+        border-radius: 0.5rem 0.5rem 0 0;
     }
 
     .recent-posts__body {
-        padding: 1.5rem;
+        padding: 1.25rem;
+    }
+
+    .recent-posts__title {
+        font-size: var(--text-24px);
+        margin-bottom: 1rem;
+    }
+
+    .recent-posts__excerpt,
+    .recent-posts__read-more {
+        font-size: var(--text-14px);
+    }
+
+    .recent-posts__read-more {
+        padding-top: 1.75rem;
+        text-decoration-thickness: 3px;
+    }
+
+    .recent-posts__footer {
+        align-items: center;
+        flex-direction: column;
+        gap: 1.25rem;
+        margin-top: 1.4rem;
+    }
+
+    .recent-posts__footer::before {
+        background:
+            radial-gradient(circle, var(--color-cwc-blue-01) 0 0.2rem, transparent 0.22rem) left center / 0.75rem 0.5rem repeat-x;
+        content: "";
+        display: block;
+        height: 0.5rem;
+        width: 2.25rem;
+    }
+
+    .recent-posts__blog-link.button {
+        font-size: var(--text-14px);
+        min-height: 2.25rem;
+        min-width: 8.5rem;
+        padding: 0.5rem 0.85rem;
     }
 }

views/blocks/recent-posts/recent-posts.php

@@ -108,7 +108,7 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
 		<?php if ( $blog_url ) : ?>
 			<div class="recent-posts__footer">
 				<a class="recent-posts__blog-link button" href="<?php echo esc_url( $blog_url ); ?>" data-button-color="secondary" data-button-variant="outline">
-					<?php echo esc_html__( 'View Blog', 'cwc' ); ?>
+					<?php echo esc_html__( 'View All News', 'cwc' ); ?>
 				</a>
 			</div>
 		<?php endif; ?>