Fix several mobile responsive issues across Hero, Newsletter, cart, and Challenge

- Hero CTA: back to a single line below lg: (wrapping put the icon
  beside two lines and looked broken), sized down instead so the full
  phrase fits.
- Hero heading: dropped the forced <br> after "darf" at true mobile
  widths, kept it only for the sm-lg tablet range it was added for.
- Hero social proof: avatars+text now wrap and center instead of
  cramming onto one row (flex-wrap + justify-center, no fixed
  breakpoint needed).
- Newsletter card icon: stacked above the copy and centered below md:
  instead of squeezed into a row beside it.
- TrustRow: left-aligned below md: instead of centered (shop, cart, and
  every other page using this component).
- Cart line item image: full width below sm: instead of a fixed 150px
  square.
- Challenge EmailCapture (top + bottom CTA, same shared component):
  input and button stack full-width below sm: instead of squeezing
  into one row.
- Challenge steps: icon above text and centered at every breakpoint
  (previously only from lg: up), connector arrows centered to match.

app/cart/components/CartContent.tsx

@@ -214,8 +214,20 @@ export function CartContent({
               <div key={lineKey} className="w-full">
                 {i > 0 && <div className="h-px bg-border w-full mb-6" />}
                 <div className="flex flex-col sm:flex-row gap-4 sm:gap-6 items-start sm:items-center w-full">
-                  <div className="relative size-[9.375rem] shrink-0 rounded-sm overflow-hidden">
-                    <Image src={product.image} alt={product.name} fill sizes="150px" className="object-cover" />
+                  {/* Full-width on mobile (stacked layout) instead of the
+                      fixed 150px square — a small square floating above
+                      the text looked cramped on a narrow column that has
+                      the width to spare; fixed 150px square again from
+                      sm: once the row layout kicks in and the image sits
+                      beside the text instead. */}
+                  <div className="relative w-full aspect-square sm:size-[9.375rem] sm:shrink-0 rounded-sm overflow-hidden">
+                    <Image
+                      src={product.image}
+                      alt={product.name}
+                      fill
+                      sizes="(min-width: 640px) 150px, 100vw"
+                      className="object-cover"
+                    />
                     {discount !== null && (
                       <span className="absolute top-2 left-2 rounded-full bg-brand px-2 py-0.5 text-label font-bold text-text-primary">
                         -{discount}%