Applied image shape and ratio to placeholder images

added classes and styles to get image shape and image ratio working

added styling on portrait placeholders

aligned placeholder when in potrait mode

applying code review suggestions and removed image-ratio

assets/component-card.css

@@ -300,7 +300,6 @@
 }
 
 .card--standard:not(.card--horizontal) .placeholder-svg {
-  height: auto;
   width: 100%;
 }
 

sections/featured-collection.liquid

@@ -109,6 +109,8 @@
               {%- assign placeholder_image = 'product-apparel-' | append: forloop.rindex -%}
               {% render 'card-product',
                 show_vendor: section.settings.show_vendor,
+                media_aspect_ratio: section.settings.image_ratio,
+                image_shape: section.settings.image_shape,
                 placeholder_image: placeholder_image
               %}
             </li>

snippets/card-product.liquid

@@ -325,21 +325,33 @@
     </div>
   </div>
 {%- else -%}
+  {%- liquid
+    assign ratio = 1
+    if media_aspect_ratio == 'portrait'
+      assign ratio = 0.8
+    endif
+  -%}
   <div class="card-wrapper product-card-wrapper underline-links-hover">
     <div
       class="
         card card--{{ settings.card_style }}
         {% if extend_height %} card--extend-height{% endif %}
+        {% if image_shape and image_shape != 'default' %} card--shape{% endif %}
         {% if settings.card_style == 'card' %} color-{{ settings.card_color_scheme }} gradient{% endif %}
       "
-      style="--ratio-percent: 100%;"
+      style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
     >
       <div
         class="card__inner{% if settings.card_style == 'standard' %} color-{{ settings.card_color_scheme }} gradient{% endif %} ratio"
-        style="--ratio-percent: 100%;"
       >
-        <div class="card__media">
-          <div class="media media--transparent">
+        <div
+          class="card__media {% if image_shape and image_shape != 'default' %} shape--{{ image_shape }} color-{{ settings.card_color_scheme }} gradient{% endif %}"
+          style="{% if  image_shape == 'default' and media_aspect_ratio == 'portrait' %}{% endif %}"
+        >
+          <div
+            class="media media--transparent"
+            style="{% if  image_shape != 'default' and media_aspect_ratio == 'portrait' %}{% endif %}"
+          >
             {%- if placeholder_image -%}
               {{ placeholder_image | placeholder_svg_tag: 'placeholder-svg' }}
             {%- else -%}