@ptcwebops/ptcw-design 1.3.6 → 1.3.8

package/dist/collection/components/ptc-card/ptc-card.css

@@ -331,7 +331,7 @@
 }
 
 :host(.listing-card) .card-border {
-  width: 100%;
+  width: 325px;
   overflow: hidden;
   background: var(--color-white);
   box-shadow: var(--ptc-shadow-small);
@@ -353,11 +353,13 @@
 }
 @media (min-width: 480px) {
   :host(.listing-card) .card-border {
+    width: 432px;
     height: 487px;
   }
 }
 @media (min-width: 768px) {
   :host(.listing-card) .card-border {
+    width: 348px;
     height: 456px;
   }
 }
@@ -365,16 +367,19 @@
   :host(.listing-card) .card-border {
     margin-left: 4px;
     margin-right: 4px;
+    width: 288px;
     height: 440px;
   }
 }
 @media (min-width: 1200px) {
   :host(.listing-card) .card-border {
+    width: 260px;
     height: 420px;
   }
 }
 @media (min-width: 1440px) {
   :host(.listing-card) .card-border {
+    width: 260px;
     height: 420px;
   }
 }
@@ -487,12 +492,12 @@
 }
 
 :host(.listing-card-horizontal) .card-border {
+  width: 325px;
   overflow: hidden;
   background: var(--color-white);
   box-shadow: var(--ptc-shadow-small);
   border-radius: 3px;
   height: 220px;
-  width: 100%;
 }
 @media (min-width: 1200px) {
   :host(.listing-card-horizontal) .card-border {
@@ -516,28 +521,32 @@
 }
 @media (min-width: 480px) {
   :host(.listing-card-horizontal) .card-border {
+    width: 432px;
     height: 178px;
   }
 }
 @media (min-width: 768px) {
   :host(.listing-card-horizontal) .card-border {
+    width: 704px;
     height: 210px;
   }
 }
 @media (min-width: 992px) {
   :host(.listing-card-horizontal) .card-border {
+    width: 688px;
     height: 200px;
   }
 }
 @media (min-width: 1200px) {
   :host(.listing-card-horizontal) .card-border {
+    width: 779px;
     height: 200px;
   }
 }
 :host(.listing-card-horizontal) .card-layout {
   display: flex;
   flex-direction: row;
-  width: 100%;
+  width: 325px;
   height: 220px;
 }
 @media (min-width: 480px) {
@@ -548,16 +557,19 @@
 }
 @media (min-width: 768px) {
   :host(.listing-card-horizontal) .card-layout {
+    width: 704px;
     height: 210px;
   }
 }
 @media (min-width: 992px) {
   :host(.listing-card-horizontal) .card-layout {
+    width: 688px;
     height: 200px;
   }
 }
 @media (min-width: 1200px) {
   :host(.listing-card-horizontal) .card-layout {
+    width: 779px;
     height: 200px;
   }
 }
@@ -570,7 +582,7 @@
   text-decoration: none;
 }
 :host(.listing-card-horizontal) .card-media {
-  width: 100%;
+  width: 325px;
   height: 224px;
   transform: scale(1);
   transform-origin: center bottom;
@@ -580,35 +592,42 @@
 }
 :host(.listing-card-horizontal) .card-media .smart-img {
   height: 224px;
+  width: 325px;
 }
 @media (min-width: 768px) {
   :host(.listing-card-horizontal) .card-media .smart-img {
+    width: 275px;
     height: 210px;
   }
 }
 @media (min-width: 992px) {
   :host(.listing-card-horizontal) .card-media .smart-img {
+    width: 224px;
     height: 200px;
   }
 }
 @media (min-width: 1200px) {
   :host(.listing-card-horizontal) .card-media .smart-img {
+    width: 260px;
     height: 200px;
   }
 }
 @media (min-width: 768px) {
   :host(.listing-card-horizontal) .card-media {
     display: block;
+    width: 275px;
     height: 210px;
   }
 }
 @media (min-width: 992px) {
   :host(.listing-card-horizontal) .card-media {
+    width: 224px;
     height: 200px;
   }
 }
 @media (min-width: 1200px) {
   :host(.listing-card-horizontal) .card-media {
+    width: 260px;
     height: 200px;
   }
 }
@@ -743,7 +762,7 @@
 }
 
 :host(.resource-center-card) .card-border {
-  width: 100%;
+  width: 325px;
   overflow: hidden;
   background: var(--color-white);
   box-shadow: var(--ptc-shadow-small);
@@ -765,26 +784,31 @@
 }
 @media (min-width: 480px) {
   :host(.resource-center-card) .card-border {
+    width: 433px;
     height: 442px;
   }
 }
 @media (min-width: 768px) {
   :host(.resource-center-card) .card-border {
+    width: 336px;
     height: 396px;
   }
 }
 @media (min-width: 992px) {
   :host(.resource-center-card) .card-border {
+    width: 287px;
     height: 396px;
   }
 }
 @media (min-width: 1200px) {
   :host(.resource-center-card) .card-border {
+    width: 260px;
     height: 396px;
   }
 }
 @media (min-width: 1440px) {
   :host(.resource-center-card) .card-border {
+    width: 260px;
     height: 396px;
   }
 }
@@ -949,7 +973,7 @@
 }
 
 :host(.case-studies-card) .card-border {
-  width: 100%;
+  width: 320px;
   overflow: hidden;
   background: var(--color-white);
   box-shadow: var(--ptc-shadow-small);
@@ -971,26 +995,31 @@
 }
 @media (min-width: 480px) {
   :host(.case-studies-card) .card-border {
+    width: 431px;
     height: 536px;
   }
 }
 @media (min-width: 768px) {
   :host(.case-studies-card) .card-border {
+    width: 335px;
     height: 452px;
   }
 }
 @media (min-width: 992px) {
   :host(.case-studies-card) .card-border {
+    width: 288px;
     height: 452px;
   }
 }
 @media (min-width: 1200px) {
   :host(.case-studies-card) .card-border {
+    width: 260px;
     height: 452px;
   }
 }
 @media (min-width: 1440px) {
   :host(.case-studies-card) .card-border {
+    width: 260px;
     height: 452px;
   }
 }