All images within tiered lists to have p-image-container--cinematic aspect ratio

Author: muhammad-ali-pk

templates/_macros/vf_tiered-list.jinja

@@ -62,13 +62,17 @@
     {%- if image -%}
       <div class="row">
         {%- if is_image_full_width -%}
-        <div class="p-section--shallow">
-          {{ image }}
-        </div>
+          <div class="p-section--shallow">
+            <div class="p-image-container--cinematic">
+              {{ image }}
+            </div>
+          </div>
         {%- else -%}
           <div class="col-start-large-7">
             <div class="p-section--shallow">
-              {{ image }}
+              <div class="p-image-container--cinematic">
+                {{ image }}
+              </div>
             </div>
           </div>
         {%- endif -%}

templates/docs/examples/patterns/tiered-list/with-default-width-image.html

@@ -19,7 +19,6 @@ <h2>H2 - up to two lines; ideally one.</h2>
   {%- endif -%}
 
   {%- if slot == "image" -%}
-  <div class="p-image-container">
     {{ image(url="https://assets.ubuntu.com/v1/3f63a18c-data-center.png",
             alt="",
             width="2464",
@@ -29,7 +28,6 @@ <h2>H2 - up to two lines; ideally one.</h2>
             attrs={"class": "p-image-container__image"}
             ) | safe
     }}
-  </div>
   {%- endif -%}
 
   {%- if slot == 'list_item_title_1' -%}

templates/docs/examples/patterns/tiered-list/with-full-width-image.html

@@ -19,7 +19,6 @@ <h2>H2 - up to two lines; ideally one.</h2>
   {%- endif -%}
 
   {%- if slot == "image" -%}
-  <div class="p-image-container--cinematic is-cover">
     {{ image(url="https://assets.ubuntu.com/v1/3f63a18c-data-center.png",
             alt="",
             width="2464",
@@ -29,7 +28,6 @@ <h2>H2 - up to two lines; ideally one.</h2>
             attrs={"class": "p-image-container__image"}
             ) | safe
     }}
-  </div>
   {%- endif -%}
 
   {%- if slot == 'list_item_title_1' -%}