@ptcwebops/ptcw-design 0.7.4 → 0.7.6

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

@@ -331,15 +331,15 @@
 }
 
 :host(.listing-card) .card-border {
-  width: 320px;
+  width: 325px;
   overflow: hidden;
   background: var(--color-white);
   box-shadow: var(--ptc-shadow-small);
   border-radius: 3px;
-  height: 447px;
+  height: 487px;
   display: flex;
   flex-direction: row;
-  margin-bottom: 1rem;
+  margin-bottom: 0.5rem;
 }
 :host(.listing-card) .card-border:hover {
   background: var(--color-gray-02);
@@ -351,15 +351,43 @@
 :host(.listing-card) .card-border:hover .card-media .smart-img {
   background: var(--color-white);
 }
-@media only screen and (min-width: 768px) {
+@media (min-width: 480px) {
+  :host(.listing-card) .card-border {
+    width: 432px;
+    height: 487px;
+  }
+}
+@media (min-width: 768px) {
   :host(.listing-card) .card-border {
     margin-left: 4px;
     margin-right: 4px;
+    width: 348px;
+    height: 456px;
+  }
+}
+@media (min-width: 992px) {
+  :host(.listing-card) .card-border {
+    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;
   }
 }
 :host(.listing-card) .card-layout {
   display: block;
   position: relative;
+  width: 100%;
+  height: 100%;
 }
 :host(.listing-card) .link-wrapper {
   outline: none;
@@ -371,17 +399,47 @@
 }
 :host(.listing-card) .card-media {
   width: 100%;
-  height: 200px;
+  height: 288px;
   transform: scale(1);
   transform-origin: center bottom;
   transition: transform var(--ptc-transition-medium) var(--ptc-standard-ease);
   transition-delay: var(--ptc-delay-medium);
 }
 :host(.listing-card) .card-media .smart-img {
-  height: 200px;
+  height: 288px;
+}
+@media (min-width: 768px) {
+  :host(.listing-card) .card-media .smart-img {
+    height: 232px;
+  }
+}
+@media (min-width: 992px) {
+  :host(.listing-card) .card-media .smart-img {
+    height: 192px;
+  }
+}
+@media (min-width: 1200px) {
+  :host(.listing-card) .card-media .smart-img {
+    height: 170px;
+  }
+}
+@media (min-width: 768px) {
+  :host(.listing-card) .card-media {
+    height: 232px;
+  }
+}
+@media (min-width: 992px) {
+  :host(.listing-card) .card-media {
+    height: 192px;
+  }
+}
+@media (min-width: 1200px) {
+  :host(.listing-card) .card-media {
+    height: 170px;
+  }
 }
 :host(.listing-card) .card-body {
-  padding: 24px 20px 0px 20px;
+  padding: 16px 20px 0px 20px;
 }
 :host(.listing-card) .card-body .card-date-text {
   display: flex;
@@ -392,7 +450,7 @@
   font-weight: 400;
   line-height: 19px;
   color: #282F35;
-  margin-bottom: 24px;
+  margin-bottom: 16px;
   display: inline-block;
   margin-top: 0rem;
 }
@@ -401,7 +459,7 @@
   font-weight: 400;
   line-height: 19px;
   color: #282F35;
-  margin-bottom: 24px;
+  margin-bottom: 16px;
   display: inline-block;
 }
 :host(.listing-card) .card-body h3 {
@@ -412,7 +470,7 @@
   line-height: var(--ptc-line-height-loose);
   line-height: 21px;
   color: var(--color-gray-11);
-  margin-bottom: 12px;
+  margin-bottom: 14px;
   margin-top: 0rem;
 }
 :host(.listing-card) ::slotted([slot=slot-date]) {
@@ -420,7 +478,7 @@
   font-size: 16px;
   line-height: 19px;
   color: #282F35;
-  margin-bottom: 24px;
+  margin-bottom: 16px;
   display: inline-block;
 }
 :host(.listing-card) ::slotted([slot=slot-description]) {
@@ -434,13 +492,12 @@
 }
 
 :host(.listing-card-horizontal) .card-border {
-  width: 411px;
+  width: 325px;
   overflow: hidden;
   background: var(--color-white);
   box-shadow: var(--ptc-shadow-small);
   border-radius: 3px;
   height: 220px;
-  margin-bottom: 1rem;
 }
 :host(.listing-card-horizontal) .card-border:hover {
   background: var(--color-gray-02);
@@ -452,58 +509,58 @@
 :host(.listing-card-horizontal) .card-border:hover .card-media .smart-img {
   background: var(--color-white);
 }
-@media only screen and (min-width: 768px) {
+@media (min-width: 480px) {
   :host(.listing-card-horizontal) .card-border {
-    width: 654px;
+    width: 432px;
     height: 178px;
   }
 }
-@media only screen and (min-width: 1200px) {
+@media (min-width: 768px) {
   :host(.listing-card-horizontal) .card-border {
-    width: 714px;
-    height: 178px;
+    width: 704px;
+    height: 184px;
   }
 }
-@media only screen and (min-width: 1440px) {
+@media (min-width: 992px) {
   :host(.listing-card-horizontal) .card-border {
-    width: 841px;
-    height: 224px;
+    width: 688px;
+    height: 166px;
   }
 }
-@media only screen and (min-width: 1600px) {
+@media (min-width: 1200px) {
   :host(.listing-card-horizontal) .card-border {
-    width: 928px;
-    height: 224px;
+    width: 779px;
+    height: 170px;
   }
 }
 :host(.listing-card-horizontal) .card-layout {
   display: flex;
   flex-direction: row;
-  width: 411px;
+  width: 325px;
   height: 220px;
 }
-@media only screen and (min-width: 768px) {
+@media (min-width: 480px) {
   :host(.listing-card-horizontal) .card-layout {
-    width: 654px;
+    width: 432px;
     height: 178px;
   }
 }
-@media only screen and (min-width: 1200px) {
+@media (min-width: 768px) {
   :host(.listing-card-horizontal) .card-layout {
-    width: 714px;
-    height: 178px;
+    width: 704px;
+    height: 184px;
   }
 }
-@media only screen and (min-width: 1440px) {
+@media (min-width: 992px) {
   :host(.listing-card-horizontal) .card-layout {
-    width: 841px;
-    height: 224px;
+    width: 688px;
+    height: 166px;
   }
 }
-@media only screen and (min-width: 1600px) {
+@media (min-width: 1200px) {
   :host(.listing-card-horizontal) .card-layout {
-    width: 928px;
-    height: 224px;
+    width: 779px;
+    height: 170px;
   }
 }
 :host(.listing-card-horizontal) .link-wrapper {
@@ -515,7 +572,7 @@
   text-decoration: none;
 }
 :host(.listing-card-horizontal) .card-media {
-  width: 385px;
+  width: 325px;
   height: 224px;
   transform: scale(1);
   transform-origin: center bottom;
@@ -525,47 +582,47 @@
 }
 :host(.listing-card-horizontal) .card-media .smart-img {
   height: 224px;
-  width: 385px;
+  width: 325px;
 }
-@media only screen and (min-width: 768px) {
+@media (min-width: 768px) {
   :host(.listing-card-horizontal) .card-media .smart-img {
-    width: 244px;
-    height: 178px;
+    width: 275px;
+    height: 184px;
   }
 }
-@media only screen and (min-width: 1440px) {
+@media (min-width: 992px) {
   :host(.listing-card-horizontal) .card-media .smart-img {
-    width: 337px;
-    height: 224px;
+    width: 224px;
+    height: 166px;
   }
 }
-@media only screen and (min-width: 1600px) {
+@media (min-width: 1200px) {
   :host(.listing-card-horizontal) .card-media .smart-img {
-    width: 408px;
-    height: 224px;
+    width: 260px;
+    height: 170px;
   }
 }
-@media only screen and (min-width: 768px) {
+@media (min-width: 768px) {
   :host(.listing-card-horizontal) .card-media {
     display: block;
-    width: 244px;
-    height: 178px;
+    width: 275px;
+    height: 184px;
   }
 }
-@media only screen and (min-width: 1440px) {
+@media (min-width: 992px) {
   :host(.listing-card-horizontal) .card-media {
-    height: 224px;
-    width: 337px;
+    width: 224px;
+    height: 166px;
   }
 }
-@media only screen and (min-width: 1600px) {
+@media (min-width: 1200px) {
   :host(.listing-card-horizontal) .card-media {
-    width: 408px;
-    height: 224px;
+    width: 260px;
+    height: 170px;
   }
 }
 :host(.listing-card-horizontal) .card-body {
-  padding: 14px 38px 0px 31px;
+  padding: 16px 24px 0px 24px;
 }
 @media only screen and (min-width: 768px) {
   :host(.listing-card-horizontal) .card-body {
@@ -589,6 +646,7 @@
   margin-bottom: 12px;
   display: inline-block;
   margin-top: 0rem;
+  margin-block-start: 0rem;
 }
 @media only screen and (min-width: 1200px) {
   :host(.listing-card-horizontal) .card-body .card-date-text p {
@@ -613,19 +671,14 @@
   margin-bottom: 12px;
   display: inline-block;
 }
-@media only screen and (min-width: 1200px) {
+@media (min-width: 992px) {
   :host(.listing-card-horizontal) .card-body .small {
-    margin-bottom: 20px;
+    margin-bottom: 4px;
   }
 }
-@media only screen and (min-width: 1440px) {
+@media (min-width: 1200px) {
   :host(.listing-card-horizontal) .card-body .small {
-    margin-bottom: 24px;
-  }
-}
-@media only screen and (min-width: 1600px) {
-  :host(.listing-card-horizontal) .card-body .small {
-    margin-bottom: 32px;
+    margin-bottom: 8px;
   }
 }
 :host(.listing-card-horizontal) .card-body h3 {
@@ -635,10 +688,20 @@
   font-size: var(--ptc-font-size-x-small);
   line-height: 19px;
   color: var(--color-gray-11);
-  margin-bottom: 12px;
+  margin-bottom: 8px;
   margin-top: 0rem;
 }
-@media only screen and (min-width: 1600px) {
+@media (min-width: 768px) {
+  :host(.listing-card-horizontal) .card-body h3 {
+    margin-bottom: 16px;
+  }
+}
+@media (min-width: 992px) {
+  :host(.listing-card-horizontal) .card-body h3 {
+    margin-bottom: 12px;
+  }
+}
+@media (min-width: 1200px) {
   :host(.listing-card-horizontal) .card-body h3 {
     margin-bottom: 16px;
   }
@@ -652,7 +715,7 @@
     line-height: var(--ptc-line-height-loose);
     line-height: 21px;
     color: var(--color-gray-11);
-    margin-bottom: 12px;
+    margin-bottom: 8px;
     margin-top: 0rem;
   }
 }
@@ -664,6 +727,11 @@
   line-height: 19px;
   color: var(--color-gray-11);
   margin-bottom: 19px;
+  margin-top: 0rem;
+  margin-block-start: 0rem;
+}
+:host(.listing-card-horizontal) ::slotted([slot=slot-description]) p {
+  margin-block-start: 0rem;
 }
 @media only screen and (min-width: 768px) {
   :host(.listing-card-horizontal) ::slotted([slot=slot-description]) {