Update bedrock to Protocol V22

bedrock/base/templates/404.html

@@ -38,7 +38,7 @@ <h1 class="error-title">{{ ftl('not-found-page-sorry-we-cant-find-that-page') }}
         </span>
       </li>
       <li>
-        <img class="list-icon" alt="" src="{{ static('protocol/img/icons/default-browser.svg') }}" width="30" height="30">
+        <img class="list-icon" alt="" src="{{ static('protocol/img/icons/heart.svg') }}" width="30" height="30">
         <span>
           {{ ftl('not-found-page-donate-to-mozilla-reclaim-from-v2', fallback='not-found-page-donate-to-mozilla-reclaim-from', donate='href="%s"'|safe|format(donate_url(location='donate-404'))) }}
         </span>

bedrock/base/templates/includes/protocol/footer/footer-refresh.html

@@ -22,9 +22,7 @@ <h2>
             <a class="moz24-footer-advertising-link" href="{{ url('mozorg.advertising.landing') }}" data-link-position="footer" data-link-text="Learn more">
               <span class="mzp-c-button-icon-text">{{ ftl('footer-refresh-learn-more-about-mozilla-ads', fallback='footer-refresh-learn-more-about-mozilla-advertising') }}</span>
               <span class="mzp-c-button-icon-end">
-                <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="24" height="24" viewBox="0 0 23.4 24">
-                  <path fill="#fff" d="M23.4 12 9.1 0v10.5H0v3h9.1V24l14.3-12zm-11.3-1.5v-4l6.6 5.5-6.6 5.5v-7z"/>
-                </svg>
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" d="m7.24 1.36 5.89 5.89H0v1.5h13.13l-5.89 5.89L8.3 15.7 16 8 8.3.3z"/></svg>
               </span>
             </a>
           </div>
@@ -97,9 +95,7 @@ <h2 class="moz24-footer-heading-social">{{ ftl('footer-refresh-follow-firefox')
     <div class="moz24-footer-actions">
       <a class="moz24-footer-donate" href="{{ donate_url(location='moco-donate-footer') }}" data-link-text="Donate">
         <span class="mzp-c-button-icon-start">
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
-            <path fill="currentColor" d="M16.34 2.93c-1.26 0-2.34.46-3.2 1.03-.11.09-.57.43-.84.82h-.71c-.28-.4-.75-.75-.85-.81s-.02-.01-.03-.02h-.01c-.85-.56-1.92-1-3.16-1-3.09 0-5.6 2.57-5.6 5.73 0 1.6.52 3.26 1.55 4.94.79 1.28 1.87 2.57 3.22 3.85 2.27 2.14 4.51 3.49 4.61 3.55l.29.17h.66l.29-.17c.09-.06 2.34-1.41 4.61-3.55 1.35-1.28 2.44-2.57 3.22-3.85 1.03-1.68 1.55-3.34 1.55-4.94 0-3.16-2.51-5.73-5.6-5.73Zm-.8 12.74c-1.4 1.33-2.82 2.34-3.61 2.87-.78-.53-2.21-1.54-3.61-2.87-1.82-1.72-3.99-4.34-3.99-7.02 0-1.83 1.44-3.33 3.2-3.33.78 0 1.58.33 2.36.99.37.31.66.63.83.85s0 .01 0 .01v2.39h2.4V7.15c.18-.22.46-.53.83-.84.78-.66 1.58-.99 2.36-.99 1.76 0 3.2 1.49 3.2 3.33 0 2.68-2.17 5.29-3.99 7.02Z"/>
-          </svg>
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill="currentColor" d="M14.8 8.25c.77-.77 1.2-1.8 1.2-2.9a4.094 4.094 0 0 0-4.1-4.1c-1.1 0-2.12.43-2.9 1.2L7.99 3.46 6.98 2.45c-.77-.77-1.8-1.2-2.9-1.2a4.094 4.094 0 0 0-4.1 4.1c0 1.1.43 2.12 1.2 2.9l6.8 6.8 6.8-6.8zM1.5 5.35c0-.7.27-1.35.76-1.83.49-.49 1.14-.76 1.84-.76s1.34.27 1.84.76l2.07 2.07 2.07-2.07c.98-.98 2.69-.98 3.67 0a2.595 2.595 0 0 1 0 3.67l-5.74 5.74-5.75-5.74c-.49-.49-.76-1.14-.76-1.84"/></g><defs><clipPath id="a"><path d="M0 0h16v16H0z"/></clipPath></defs></svg>
         </span>
         <span class="mzp-c-button-icon-text">{{ ftl('footer-refresh-donate') }}</span>
       </a>

bedrock/base/templates/includes/protocol/navigation/menus-refresh/products.html

@@ -62,9 +62,7 @@ <h2 class="m24-c-menu-item-title">{{ ftl('navigation-refresh-thunderbird') }}</h
         <p class="m24-c-menu-category-link">
           <a href="{{ url('products.landing') }}" data-link-text="Go to all browsers and products" data-link-position="topnav - products">
             {{ ftl('navigation-refresh-all-products') }}
-            <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="24" height="24" viewBox="0 0 23.4 24" fill="currentColor">
-              <path d="M23.4 12 9.1 0v10.5H0v3h9.1V24l14.3-12zm-11.3-1.5v-4l6.6 5.5-6.6 5.5v-7z"/>
-            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" d="m7.24 1.36 5.89 5.89H0v1.5h13.13l-5.89 5.89L8.3 15.7 16 8 8.3.3z"/></svg>
           </a>
         </p>
       </div>

bedrock/careers/templates/careers/404.html

@@ -41,7 +41,7 @@ <h1 class="error-title">Sorry, we can’t find that job posting</h1>
         </span>
       </li>
       <li>
-        <img class="list-icon" alt="" src="{{ static('protocol/img/icons/default-browser.svg') }}" width="30" height="30">
+        <img class="list-icon" alt="" src="{{ static('protocol/img/icons/heart.svg') }}" width="30" height="30">
         <span>
           <a href="{{ donate_url(location='donate-404') }}">Donate</a> to Mozilla Foundation and reclaim the internet from big tech.
         </span>

bedrock/cms/templates/cms/simple_rich_text_page.html

@@ -17,7 +17,7 @@ <h1 class="mzp-c-article-title" itemprop="name">
     </h1>
   </header>
 
-  <div itemprop="articleBody" class="mzp-c-article w-rich-text">
+  <div itemprop="articleBody" class="mzp-c-article mzp-u-rich-text">
     {{page.content|richtext}}
   </div>
 </div>

bedrock/firefox/templates/firefox/all/download.html

@@ -12,7 +12,7 @@
 <h2 {% if not (product and platform and locale) %} class="c-step-name t-step-disabled" aria-disabled="true" {% else %} class="c-step-name" aria-disabled="false" {% endif %}>
   {{ ftl('firefox-all-download') }}
   {% if product and platform and locale %}
-    <img alt="{{ ftl('firefox-all-down-arrow') }}" class="c-step-icon" src="{{ static('protocol/img/icons/arrow-down.svg') }}" width="30" height="30">
+    <img alt="{{ ftl('firefox-all-down-arrow') }}" class="c-step-icon" src="{{ static('protocol/img/icons/caret-down.svg') }}" width="30" height="30">
   {% else %}
     <img alt="{{ current_step }}" class="c-step-icon" src="{{ static('protocol/img/icons/arrow-left.svg') }}" width="30" height="30">
   {% endif %}

bedrock/firefox/templates/firefox/all/lang.html

@@ -13,15 +13,15 @@ <h2 {% if not (product and platform) %} class="c-step-name t-step-disabled" aria
       <a href="{{ url('firefox.all.locales', product_slug=product.slug, platform=platform) }}" class="c-step-icon"><img alt="{{ ftl('firefox-all-change-language') }}" src="{{ static('protocol/img/icons/close.svg') }}" width="30" height="30"></a>
     {% endif %}
   {% elif product and platform %}
-    <img alt="{{ ftl('firefox-all-down-arrow') }}" class="c-step-icon" src="{{ static('protocol/img/icons/arrow-down.svg') }}" width="30" height="30">
+    <img alt="{{ ftl('firefox-all-down-arrow') }}" class="c-step-icon" src="{{ static('protocol/img/icons/caret-down.svg') }}" width="30" height="30">
   {% else %}
     <img alt="{{ current_step }}" class="c-step-icon" src="{{ static('protocol/img/icons/arrow-left.svg') }}" width="30" height="30">
   {% endif %}
 </h2>
 
 {% if product and platform and not locale %}
 <div class="c-step-contents">
-  <h3 class="c-step-prompt">{{ ftl('firefox-all-select-your-preferred-language') }}<img alt="{{ ftl('firefox-all-down-arrow') }}" class="c-step-icon" src="{{ static('protocol/img/icons/arrow-down.svg') }}" width="30" height="30"></h3>
+  <h3 class="c-step-prompt">{{ ftl('firefox-all-select-your-preferred-language') }}<img alt="{{ ftl('firefox-all-down-arrow') }}" class="c-step-icon" src="{{ static('protocol/img/icons/caret-down.svg') }}" width="30" height="30"></h3>
   <ul class="c-lang-list">
     {% for locale, name in locales %}
       <li><a href="{{ url('firefox.all.download', product_slug=product.slug, platform=platform, locale=locale) }}">{{ name }}</a></li>

bedrock/firefox/templates/firefox/all/platform.html

@@ -15,7 +15,7 @@ <h2 {% if not product %} class="c-step-name t-step-disabled" aria-disabled="true
       <a href="{{ url('firefox.all.platforms', product_slug=product.slug) }}" class="c-step-icon"><img alt="{{ ftl('firefox-all-change-platform') }}" src="{{ static('protocol/img/icons/close.svg') }}" width="30" height="30"></a>
     {% endif %}
   {% elif product %}
-    <img alt="{{ ftl('firefox-all-down-arrow') }}" class="c-step-icon" src="{{ static('protocol/img/icons/arrow-down.svg') }}" width="30" height="30">
+    <img alt="{{ ftl('firefox-all-down-arrow') }}" class="c-step-icon" src="{{ static('protocol/img/icons/caret-down.svg') }}" width="30" height="30">
   {% else %}
     <img alt="{{ current_step }}" class="c-step-icon" src="{{ static('protocol/img/icons/arrow-left.svg') }}" width="30" height="30">
   {% endif %}

bedrock/firefox/templates/firefox/all/product.html

@@ -11,7 +11,7 @@ <h2 class="c-step-name">
   {% if product %}
     <span class="c-step-choice">{{ product and product.name }}</span> <a href="{{ url('firefox.all') }}" class="c-step-icon"><img alt="{{ ftl('firefox-all-change-browser') }}" src="{{ static('protocol/img/icons/close.svg') }}" width="30" height="30"></a>
   {% else %}
-    <img alt="{{ ftl('firefox-all-down-arrow') }}" class="c-step-icon" src="{{ static('protocol/img/icons/arrow-down.svg') }}" width="30" height="30">
+    <img alt="{{ ftl('firefox-all-down-arrow') }}" class="c-step-icon" src="{{ static('protocol/img/icons/caret-down.svg') }}" width="30" height="30">
   {% endif %}
 
   {% if not product %}

bedrock/mozorg/templates/mozorg/about/policy/transparency/2024.html

@@ -14,7 +14,7 @@ <h1>2024 Transparency Reports</h1>
 
 {% block report_body %}
 <div class="c-2024-back-link">
-  <img src="{{ static('img/icons/m24-small/left-arrow.svg') }}" alt="">
+  <img src="{{ static('protocol/img/icons/arrow-left.svg') }}" alt="Back" height="20" width="20">
   <a href="{{ url('mozorg.about.policy.transparency.index') }}">Mozilla Transparency</a>
 </div>
 <section>
@@ -24,11 +24,7 @@ <h1>2024 Transparency Reports</h1>
   <p>On February 28, 2025, we published our <a download href="https://assets.mozilla.net/pdf/transparency-report/2024-dsa.pdf">2024 DSA Transparency Report</a>. Because that report was required to follow a specific reporting format, some of the data in that report — such as the number and type of requests we received from law enforcement agencies — is limited to the EU.  The EU requests included in that report are also counted in the global government demand totals listed below.  Other data in the DSA report — such as the number of copyright-related takedown notices we received and actioned — is not tracked country-by-country.  The DSA report therefore contains the same numbers as are indicated here, in our global report.</p>
   <ul class="c-2024-reports">
     <li>
-      <a download class="mzp-c-button" href="https://assets.mozilla.net/pdf/transparency-report/2024-dsa.pdf">2024 DSA Transparency Report <span class="mzp-c-button-icon-end"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-        <title>Download</title>
-        <path fill="currentColor" d="M19.5 17.31v2.13H4.72v-2.13h-2.6v4.73H22.1v-4.73h-2.6z"/>
-        <path fill="currentColor" d="M21.44 7.09h-8.03V2.06h-2.6v5.03H2.78l9.33 11.09 9.33-11.09Zm-5.59 2.59-3.74 4.46-3.74-4.46h7.48Z"/>
-      </svg></span></a>
+      <a download class="mzp-c-button" href="https://assets.mozilla.net/pdf/transparency-report/2024-dsa.pdf">2024 DSA Transparency Report <span class="mzp-c-button-icon-end"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><title>Download</title><clipPath id="a"><path d="M0 0h16v16H0z"/></clipPath><g fill="currentColor" clip-path="url(#a)"><path d="M7.25 0v10.21L3.53 6.49 2.47 7.55 8 13.08l5.53-5.53-1.06-1.06-3.72 3.72V0zM16 14.5H0V16h16z"/></g></svg></a>
     </li>
     <li>
       <a class="mzp-c-button mzp-t-secondary" href="{{ url('mozorg.about.policy.transparency.jan-jun-2024') }}">January 1, 2024 to June 30, 2024</a>

bedrock/mozorg/templates/mozorg/advertising/includes/home-ads-contact.html

@@ -1,3 +1,9 @@
+{#
+ This Source Code Form is subject to the terms of the Mozilla Public
+ License, v. 2.0. If a copy of the MPL was not distributed with this
+ file, You can obtain one at https://mozilla.org/MPL/2.0/.
+#}
+
 <section class="m24-c-content mozads-c-home-contact has-scroll-padding" id="contact-sales">
   <div class="mozads-c-home-contact-grid">
     <div class="cell justify-content">
@@ -14,15 +20,7 @@ <h2 class="mozads-section-heading">Extend reach. Deepen Trust. Start today.</h2>
           Contact Sales
 
           <span class="mzp-c-button-icon-end">
-          <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-                <g transform="translate(4.000000, 4.000000)" stroke="currentColor" stroke-width="2">
-                    <polyline points="9 0 16 0 16 7"></polyline>
-                    <path d="M8,8 L16,0"></path>
-                    <path d="M4,-1.77635684e-15 L3,-1.77635684e-15 C1.34314575,-1.47199765e-15 -2.02906125e-16,1.34314575 0,3 L0,13 C2.02906125e-16,14.6568542 1.34314575,16 3,16 L13,16 C14.6568542,16 16,14.6568542 16,13 L16,12"></path>
-                </g>
-            </g>
-          </svg>
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" d="M9.25 1.5h4.19L7.12 7.82l1.06 1.06 6.32-6.32v4.19H16V0H9.25z"/><path fill="currentColor" d="M12 9h-1.5v5.5h-9v-9H7V4H0v12h12z"/></svg>
         </span>
         </a>
       </div>

bedrock/mozorg/templates/mozorg/cms/about/blocks/leadership_block.html

@@ -36,7 +36,7 @@ <h3 class="fn" itemprop="name">{{ value.name }}</h3>
   </div>
 
   {% if value.biography %}
-    <div class="person-bio w-rich-text">
+    <div class="person-bio mzp-u-rich-text">
       {{ value.biography|richtext }}
     </div>
   {% endif %}

bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html

@@ -8,10 +8,10 @@
   <section class="m24-c-flag" data-animation-running="false">
     <button class="m24-c-flag-button js-animation-button hide-from-legacy-ie" aria-live="assertive">
       <span class="m24-c-flag-button-pause">
-        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"><path d="M4 1v12M10 1v12" stroke="currentColor" stroke-width="2"/></svg>
+        <svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" stroke-width="2" d="M7 2H0v12h7zM5.5 12.5h-4v-9h4zM9 14h7V2H9zm1.5-10.5h4v9h-4z"/></svg>
         <span class="m24-c-flag-button-text">{{ ftl('ui-pause-animation') }}</span></span>
       <span class="m24-c-flag-button-play">
-        <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M12 7 4 0v6.121h1.69V3.776L9.374 7 5.69 10.224V7.879H4V14l8-7Z" /></g><defs><clipPath id="a"><path d="M0 0h14v14H0z"/></clipPath></defs></svg>
+        <svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" stroke-width="2" d="m2 16 14-8L2 0zM3.5 2.58 12.98 8 3.5 13.42z"/></svg>
         <span class="m24-c-flag-button-text">{{ ftl('ui-play-animation') }}</span></span>
     </button>
     <div class="m24-c-flag-text">

bedrock/mozorg/views.py

@@ -150,9 +150,9 @@ def get_context_data(self, **kwargs):
     def get_template_names(self):
         experience = self.request.GET.get("xv", None)
 
-        if ftl_file_is_active("mozorg/home-m24") and experience != "legacy":
+        if ftl_file_is_active("mozorg/home-m24") and experience not in ["quantum", "trailhead"]:
             return [self.m24_template_name]
-        elif ftl_file_is_active("mozorg/home-new") and experience != "legacy":
+        elif ftl_file_is_active("mozorg/home-new") and experience != "quantum":
             return [self.template_name]
 
         return [self.old_template_name]

bedrock/products/templates/products/landing.html

@@ -35,8 +35,8 @@
 {% set referrals = '?utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=products' %}
 {% set _entrypoint = 'mozilla.org-products' %}
 
-{% set icon_external = '<span class="mzp-c-button-icon-end"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"><path d="M13 4h7v7M12 12l8-8M8 4H7a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3v-1"/></g></svg></span>' %}
-{% set icon_download ='<span class="mzp-c-button-icon-end"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M8 13c.2 0 .4-.1.5-.2l4.4-4.4-1.1-1.1-3.1 3.1V1H7.2v9.4L4.1 7.3l-1 1.1 4.4 4.4c.1.1.3.2.5.2z" /><path d="M13.5 12v2c0 .3-.2.5-.5.5H3c-.3 0-.5-.2-.5-.5v-2H1v2c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2v-2h-1.5z" /></svg></span>' %}
+{% set icon_external = '<span class="mzp-c-button-icon-end" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" d="M9.25 1.5h4.19L7.12 7.82l1.06 1.06 6.32-6.32v4.19H16V0H9.25z"/><path fill="currentColor" d="M12 9h-1.5v5.5h-9v-9H7V4H0v12h12z"/></svg></span>' %}
+{% set icon_download ='<span class="mzp-c-button-icon-end" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><clipPath id="a"><path d="M0 0h16v16H0z"/></clipPath><g fill="currentColor" clip-path="url(#a)"><path d="M7.25 0v10.21L3.53 6.49 2.47 7.55 8 13.08l5.53-5.53-1.06-1.06-3.72 3.72V0zM16 14.5H0V16h16z"/></g></svg></span>' %}
 
 {% block content %}
 <main>

bedrock/products/templates/products/monitor/cms/article.html

@@ -44,7 +44,7 @@ <h3>{{ ftl('ui-contents') }}</h3>
     </aside>
 
     <main class="mzp-l-main">
-    <article class="mzp-c-article w-rich-text">
+    <article class="mzp-c-article mzp-u-rich-text">
       <h1 class="mzp-c-article-title">{{ page.title }}</h1>
       <p class="c-subhead">{{ page.subheading|richtext }}</p>
 

bedrock/products/templates/products/vpn/cms/resource-center/detail.html

@@ -27,7 +27,7 @@
 </nav>
 <div class="vpn-article-container">
   <div class="mzp-l-content mzp-t-content-md">
-    <article class="mzp-c-article vpn-article w-rich-text">
+    <article class="mzp-c-article vpn-article mzp-u-rich-text">
       <h2>{{ page.title }}</h2>
       {{ page.content|richtext }}
     </article>

l10n/en/mozorg/home-new.ftl

@@ -2,7 +2,7 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-### URL: https://www-dev.allizom.org/ (Global locales)
+### URL: https://www-dev.allizom.org/?xv=trailhead (Previous homepage version)
 
 home-internet-for-people-not-profit = Internet for people, not profit
 home-did-you-know-mozilla-the-maker = Did you know? { -brand-name-mozilla } — the maker of { -brand-name-firefox } — fights to keep the internet a global public resource, open and accessible to all.

l10n/en/mozorg/home.ftl

@@ -2,7 +2,7 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-### URL: https://www-dev.allizom.org/ ('en-US', 'en-CA', 'en-GB', 'de' and 'fr' excluded)
+### URL: https://www-dev.allizom.org/?xv=quantum (old, old homepage)
 
 home-internet-for-people-not-profit = Internet for people, not profit
 home-did-you-know-mozilla-the-maker = Did you know? { -brand-name-mozilla } — the maker of { -brand-name-firefox } — fights to keep the internet a global public resource, open and accessible to all.

media/css/cms/rich-text.scss

@@ -3,50 +3,10 @@
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
 @use '~@mozilla-protocol/core/protocol/css/includes/lib' as *;
+@use '~@mozilla-protocol/core/protocol/css/base/utilities/rich-text';
 
-.w-rich-text {
-    ul {
-        @include bidi(((margin-left, $layout-sm, margin-right, 0),));
-        list-style: disc;
-
-        li {
-            margin-bottom: 0.25em;
-        }
-
-        ul {
-            @include bidi(((margin-left, $layout-xs, margin-right, 0),));
-            list-style: circle;
-            margin-bottom: 0;
-        }
-
-        ol {
-            @include bidi(((margin-left, $layout-xs, margin-right, 0),));
-            list-style: decimal;
-            margin-bottom: 0;
-        }
-    }
-
-    ol {
-        @include bidi(((margin-left, $layout-sm, margin-right, 0),));
-        list-style: decimal;
-
-        li {
-            margin-bottom: 0.25em;
-        }
-
-        ol {
-            @include bidi(((margin-left, $layout-xs, margin-right, 0),));
-            list-style: lower-alpha;
-            margin-bottom: 0;
-        }
-
-        ul {
-            @include bidi(((margin-left, $layout-xs, margin-right, 0),));
-            list-style: disc;
-            margin-bottom: 0;
-        }
-    }
 
+.mzp-u-rich-text {
     .richtext-image {
         display: block;
         height: auto;