update about page manifesto section to use reduced padding icons (fix #…

…15679) (#15761)

* update about page hero section to use reduced padding icons

* add viewBox for svgs and styles tweaks

bedrock/mozorg/templates/mozorg/about/includes/m24/manifesto.html

@@ -43,7 +43,7 @@ <h2 class="m24-c-feature-title">{{ ftl('m24-about-together-we-can') }}</h2>
     {% call picto(
       base_el='li',
       image=resp_img(
-        url='img/icons/m24-large/bell.svg',
+        url='img/icons/m24-reduced-padding/bell.svg',
         optional_attributes={
           'class': 'mzp-c-picto-image',
           'loading': 'lazy'
@@ -59,7 +59,7 @@ <h2 class="m24-c-feature-title">{{ ftl('m24-about-together-we-can') }}</h2>
     {% call picto(
       base_el='li',
       image=resp_img(
-        url='img/icons/m24-large/glasses.svg',
+        url='img/icons/m24-reduced-padding/glasses.svg',
         optional_attributes={
           'class': 'mzp-c-picto-image',
           'loading': 'lazy',
@@ -75,7 +75,7 @@ <h2 class="m24-c-feature-title">{{ ftl('m24-about-together-we-can') }}</h2>
     {% call picto(
       base_el='li',
       image=resp_img(
-        url='img/icons/m24-large/pencil.svg',
+        url='img/icons/m24-reduced-padding/pencil.svg',
         optional_attributes={
           'class': 'mzp-c-picto-image',
           'loading': 'lazy'
@@ -91,7 +91,7 @@ <h2 class="m24-c-feature-title">{{ ftl('m24-about-together-we-can') }}</h2>
     {% call picto(
       base_el='li',
       image=resp_img(
-        url='img/icons/m24-large/dollar.svg',
+        url='img/icons/m24-reduced-padding/dollar.svg',
         optional_attributes={
           'class': 'mzp-c-picto-image',
           'loading': 'lazy'

media/css/m24/feature.scss

@@ -60,8 +60,9 @@
     text-wrap-style: balance;
 
     .mzp-c-picto-image {
-        height: 48px;
-        width: 48px;
+        height: 30px;
+        width: auto;
+        margin: $spacer-sm 0 $spacer-md;
     }
 
     p {
@@ -73,12 +74,6 @@
     font-size: 24px;
 }
 
-@media #{$mq-md} {
-    .mzp-c-picto-image {
-        margin-bottom: $spacer-sm;
-    }
-}
-
 @media #{$mq-lg} {
     .mzp-c-picto {
         max-width: grid(6);