@kiva/kv-components 10.4.1 → 10.5.1

package/dist/vue/KvClassicLoanCard2.js

@@ -1,298 +1,255 @@
-import a from "graphql-tag";
-import S from "numeral";
-import { LOAN_CALLOUTS_FRAGMENT as M, LOAN_GEOCODE_FRAGMENT as k, LOAN_PROGRESS_FRAGMENT as F, loanCardComputedProperties as R, loanCardMethods as w, useLocationTruncation as E } from "../utils/loanCard.js";
-import b from "./KvLoanUse.js";
-import O from "./KvBorrowerImage.js";
-import G from "./KvLoanProgressGroup.js";
-import D from "./KvLoanCallouts.js";
-import P from "./KvLendCta.js";
-import I from "./KvLoanBookmark.js";
-import V from "./KvLoanTag.js";
-import $ from "./KvMaterialIcon.js";
-import U from "./KvLoadingPlaceholder.js";
-import z from "./KvLoanTeamPick.js";
-import W from "./KvLoanActivities.js";
-import x from "./KvTooltip.js";
-import { KV_LEND_CTA_FRAGMENT as H, KV_LEND_CTA_USER_FRAGMENT as j } from "./KvLendCta2.js";
-import { KV_LOAN_ACTIVITIES_FRAGMENT as q } from "./KvLoanActivities2.js";
-import { KV_LOAN_TAG_FRAGMENT as J } from "./KvLoanTag2.js";
-import { KV_LOAN_USE_FRAGMENT as Q } from "./KvLoanUse2.js";
-import { KV_LOAN_BOOKMARK_FRAGMENT as X } from "./KvLoanBookmark2.js";
-const ve = a`
-	fragment KvClassicLoanCard on LoanBasic {
-		id
-		gender
-		image {
-			id
-			hash # for imageHash
-		}
-		lenders(limit: 0) {
-			totalCount # for lendersNumber
-		}
-		loanFundraisingInfo {
-			id
-			fundedAmount # for amountLent
-		}
-		name # for borrowerName
-		...KvLendCta
-		...KvLoanActivities
-		...KvLoanTag
-		...KvLoanUse
-		...LoanCallouts
-		...LoanGeocode
-		...LoanProgress
-	}
-	${H}
-	${q}
-	${J}
-	${Q}
-	${M}
-	${k}
-	${F}
-`, ye = a`
-	fragment KvClassicLoanCardUser on LoanBasic {
-		id
-		...KvLendCtaUser
-		...KvLoanBookmark
-	}
-	${j}
-	${X}
-`, Ce = {
-  name: "KvClassicLoanCard",
-  components: {
-    KvBorrowerImage: O,
-    KvLoadingPlaceholder: U,
-    KvLoanUse: b,
-    KvLoanProgressGroup: G,
-    KvMaterialIcon: $,
-    KvLendCta: P,
-    KvLoanTag: V,
-    KvLoanCallouts: D,
-    KvLoanBookmark: I,
-    KvLoanTeamPick: z,
-    KvLoanActivities: W,
-    KvTooltip: x
-  },
-  props: {
-    loanId: {
-      type: Number,
-      default: void 0
-    },
-    loan: {
-      type: Object,
-      default: null
-    },
-    customLoanDetails: {
-      type: Boolean,
-      default: !1
-    },
-    showTags: {
-      type: Boolean,
-      default: !1
-    },
-    categoryPageName: {
-      type: String,
-      default: ""
-    },
-    enableFiveDollarsNotes: {
-      type: Boolean,
-      default: !1
-    },
-    isAdding: {
-      type: Boolean,
-      default: !1
-    },
-    isVisitor: {
-      type: Boolean,
-      default: !0
-    },
-    basketItems: {
-      type: Array,
-      default: () => []
-    },
-    isBookmarked: {
-      type: Boolean,
-      default: !1
-    },
-    kvTrackFunction: {
-      type: Function,
-      required: !0
-    },
-    photoPath: {
-      type: String,
-      required: !0
-    },
-    showViewLoan: {
-      type: Boolean,
-      default: !1
-    },
-    externalLinks: {
-      type: Boolean,
-      default: !1
-    },
-    route: {
-      type: Object,
-      default: void 0
-    },
-    userBalance: {
-      type: String,
-      default: void 0
-    },
-    getCookie: {
-      type: Function,
-      default: void 0
-    },
-    setCookie: {
-      type: Function,
-      default: void 0
-    },
-    fiveDollarsSelected: {
-      type: Boolean,
-      default: !1
-    },
-    customCallouts: {
-      type: Array,
-      default: () => []
-    },
-    useFullWidth: {
-      type: Boolean,
-      default: !1
-    },
-    largeCard: {
-      type: Boolean,
-      default: !1
-    },
-    isTeamPick: {
-      type: Boolean,
-      default: !1
-    },
-    combinedActivities: {
-      type: Array,
-      default: () => []
-    },
-    errorMsg: {
-      type: String,
-      default: ""
-    },
-    primaryButtonText: {
-      type: String,
-      default: "Lend"
-    },
-    secondaryButtonHandler: {
-      type: Function,
-      default: void 0
-    },
-    secondaryButtonText: {
-      type: String,
-      default: "Checkout now"
-    },
-    showContributors: {
-      type: Boolean,
-      default: !1
-    },
-    customHref: {
-      type: String,
-      default: ""
-    },
-    enableMultiMatching: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  emits: [
-    "toggle-bookmark",
-    "jump-filter-page",
-    "add-to-basket",
-    "remove-from-basket"
-  ],
-  setup(e, { emit: t }) {
-    const {
-      allDataLoaded: o,
-      borrowerName: r,
-      city: n,
-      countryName: i,
-      distributionModel: l,
-      formattedLocation: s,
-      fundraisingPercent: d,
-      hasProgressData: u,
-      imageHash: m,
-      isLoading: f,
-      loanAmount: p,
-      loanBorrowerCount: c,
-      loanCallouts: L,
-      loanStatus: g,
-      loanUse: A,
-      mdiMapMarker: v,
-      readMorePath: y,
-      state: C,
-      tag: h,
-      unreservedAmount: _,
-      sharesAvailable: K
-    } = R(e), {
-      clickReadMore: N
-    } = w(e, t), {
-      locationRef: T,
-      isLocationTruncated: B
-    } = E();
-    return {
-      allDataLoaded: o,
-      borrowerName: r,
-      city: n,
-      countryName: i,
-      distributionModel: l,
-      formattedLocation: s,
-      fundraisingPercent: d,
-      hasProgressData: u,
-      imageHash: m,
-      isLoading: f,
-      loanAmount: p,
-      loanBorrowerCount: c,
-      loanCallouts: L,
-      loanStatus: g,
-      loanUse: A,
-      mdiMapMarker: v,
-      readMorePath: y,
-      state: C,
-      tag: h,
-      unreservedAmount: _,
-      sharesAvailable: K,
-      clickReadMore: N,
-      locationRef: T,
-      isLocationTruncated: B
-    };
-  },
-  computed: {
-    cardWidth() {
-      return this.useFullWidth ? "100%" : "374px";
-    },
-    imageAspectRatio() {
-      return this.largeCard ? 5 / 8 : 3 / 4;
-    },
-    imageDefaultWidth() {
-      return this.largeCard ? 480 : 336;
-    },
-    imageSizes() {
-      return this.largeCard ? [{ width: 480 }] : [
-        { width: this.imageDefaultWidth, viewSize: 1024 },
-        { width: this.imageDefaultWidth, viewSize: 768 },
-        { width: 416, viewSize: 480 },
-        { width: 374, viewSize: 414 },
-        { width: 335, viewSize: 375 }
-      ];
-    },
-    lendersNumber() {
-      var e, t;
-      return ((t = (e = this.loan) == null ? void 0 : e.lenders) == null ? void 0 : t.totalCount) ?? 0;
-    },
-    amountLent() {
-      var t, o;
-      const e = ((o = (t = this.loan) == null ? void 0 : t.loanFundraisingInfo) == null ? void 0 : o.fundedAmount) ?? 0;
-      return S(e).format("$0,0");
-    }
-  }
+import N from "./KvClassicLoanCard.js";
+import { KV_CLASSIC_LOAN_CARD_FRAGMENT as ae, KV_CLASSIC_LOAN_CARD_USER_FRAGMET as oe } from "./KvClassicLoanCard.js";
+import { resolveComponent as i, openBlock as a, createElementBlock as s, normalizeStyle as T, normalizeClass as r, createElementVNode as d, createBlock as n, resolveDynamicComponent as v, withCtx as g, createVNode as w, toDisplayString as b, createTextVNode as V, createCommentVNode as c, Fragment as R, renderList as S } from "vue";
+import "./KvClassicLoanCard.css";
+import F from "../_virtual/_plugin-vue_export-helper.js";
+const I = { class: "tw-grow" }, E = { class: "loan-card-active-hover" }, K = {
+  key: 1,
+  class: "tw-relative"
+}, z = { key: 0 }, W = {
+  class: "tw-absolute tw-bottom-1 tw-left-1 tw-text-primary tw-bg-white tw-rounded tw-p-1 tw-mb-0 tw-text-label tw-flex tw-items-center tw-h-3",
+  style: { padding: "2px 6px", "text-transform": "capitalize", "max-width": "calc(100% - 1rem)" }
+}, U = ["id"], j = { class: "tw-mb-1.5 tw-pt-1" }, G = { key: 1 }, H = {
+  key: 0,
+  class: "tw-w-full tw-pt-1 tw-pr-1"
+}, O = {
+  key: 0,
+  class: "tw-text-center tw-w-full tw-mt-1 tw-font-medium"
+}, q = {
+  key: 1,
+  class: "tw-pt-1.5"
 };
+function J(u, o, e, t, Q, m) {
+  const k = i("kv-loading-placeholder"), h = i("kv-borrower-image"), f = i("kv-material-icon"), _ = i("kv-tooltip"), y = i("kv-loan-team-pick"), x = i("kv-loan-bookmark"), C = i("kv-loan-tag"), L = i("kv-loan-use"), A = i("kv-loan-callouts"), M = i("kv-loan-progress-group"), P = i("kv-lend-cta"), B = i("KvLoanActivities");
+  return a(), s("div", {
+    class: r(["tw-flex tw-flex-col tw-bg-white tw-rounded tw-w-full tw-pb-1", { "tw-p-1": !e.largeCard, "tw-pointer-events-none": t.isLoading }]),
+    "data-testid": "loan-card",
+    style: T([{ "box-shadow": "0 4px 12px rgba(0, 0, 0, 0.08)" }, { minWidth: "230px", maxWidth: m.cardWidth }])
+  }, [
+    d("div", I, [
+      d("div", E, [
+        t.isLoading ? (a(), n(k, {
+          key: 0,
+          class: r(["tw-mb-1 tw-w-full", { "tw-rounded-t tw-rounded-b-none": e.largeCard, "!tw-rounded-sm": !e.largeCard }]),
+          style: { height: "15rem" }
+        }, null, 8, ["class"])) : (a(), s("div", K, [
+          (a(), n(v(t.tag), {
+            to: t.readMorePath,
+            href: t.readMorePath,
+            class: "tw-flex",
+            "aria-label": "Borrower image",
+            onClick: o[0] || (o[0] = (l) => t.clickReadMore("Photo", l))
+          }, {
+            default: g(() => [
+              w(h, {
+                class: r(["tw-relative tw-w-full tw-bg-black tw-bg-clip-content", { "tw-rounded-t": e.largeCard, "tw-rounded-sm": !e.largeCard }]),
+                alt: `Photo of ${t.borrowerName}`,
+                "aspect-ratio": m.imageAspectRatio,
+                "default-image": { width: m.imageDefaultWidth },
+                hash: t.imageHash,
+                images: m.imageSizes,
+                "photo-path": e.photoPath
+              }, null, 8, ["class", "alt", "aspect-ratio", "default-image", "hash", "images", "photo-path"]),
+              t.countryName ? (a(), s("div", z, [
+                d("p", W, [
+                  w(f, {
+                    class: "tw-h-2 tw-w-2 tw-flex-shrink-0",
+                    icon: t.mdiMapMarker
+                  }, null, 8, ["icon"]),
+                  d("span", {
+                    id: `loan-location-${e.loanId}`,
+                    ref: "locationRef",
+                    class: "tw-truncate tw-min-w-0",
+                    style: { "margin-top": "0.125rem" }
+                  }, b(t.formattedLocation), 9, U),
+                  t.isLocationTruncated ? (a(), n(_, {
+                    key: 0,
+                    controller: `loan-location-${e.loanId}`,
+                    "max-width": "250px"
+                  }, {
+                    default: g(() => [
+                      V(b(t.formattedLocation), 1)
+                    ]),
+                    _: 1
+                  }, 8, ["controller"])) : c("", !0)
+                ])
+              ])) : c("", !0)
+            ]),
+            _: 1
+          }, 8, ["to", "href"])),
+          e.isTeamPick ? (a(), n(y, {
+            key: 0,
+            class: r(["tw-absolute", { "tw-right-6": !e.isVisitor, "tw-right-0": e.isVisitor }]),
+            style: { top: "-6px" },
+            "data-testid": "loan-card-teampick"
+          }, null, 8, ["class"])) : c("", !0),
+          e.isVisitor ? c("", !0) : (a(), n(x, {
+            key: 1,
+            "loan-id": e.loanId,
+            "is-bookmarked": e.isBookmarked,
+            class: "tw-absolute tw-right-1",
+            style: { top: "-6px" },
+            "data-testid": "loan-card-bookmark",
+            onToggleBookmark: o[1] || (o[1] = (l) => u.$emit("toggle-bookmark"))
+          }, null, 8, ["loan-id", "is-bookmarked"]))
+        ])),
+        (a(), n(v(t.tag), {
+          to: t.readMorePath,
+          href: t.readMorePath,
+          class: r(["tw-flex tw-no-underline hover:tw-no-underline focus:tw-no-underline", { "tw-px-1": e.largeCard }]),
+          "aria-label": "Loan tag",
+          onClick: o[2] || (o[2] = (l) => t.clickReadMore("Tag", l))
+        }, {
+          default: g(() => [
+            e.showTags && !t.isLoading ? (a(), n(C, {
+              key: 0,
+              loan: e.loan,
+              "enable-multi-matching": e.enableMultiMatching
+            }, null, 8, ["loan", "enable-multi-matching"])) : c("", !0)
+          ]),
+          _: 1
+        }, 8, ["to", "href", "class"])),
+        (a(), n(v(t.tag), {
+          to: t.readMorePath,
+          href: t.readMorePath,
+          class: "loan-card-use tw-no-underline tw-text-primary",
+          "aria-label": "Loan use",
+          onClick: o[3] || (o[3] = (l) => t.clickReadMore("Use", l))
+        }, {
+          default: g(() => [
+            d("div", j, [
+              t.isLoading ? (a(), s("div", {
+                key: 0,
+                class: r(["tw-w-full", { "tw-px-1": e.largeCard }]),
+                style: { height: "5.5rem" }
+              }, [
+                (a(!0), s(R, null, S([...Array(4)], (l, D) => (a(), s("div", {
+                  key: D,
+                  class: "tw-h-2 tw-mb-1"
+                }, [
+                  w(k)
+                ]))), 128))
+              ], 2)) : (a(), s("div", G, [
+                w(L, {
+                  use: t.loanUse,
+                  "loan-amount": t.loanAmount,
+                  status: t.loanStatus,
+                  "borrower-count": t.loanBorrowerCount,
+                  name: t.borrowerName,
+                  "distribution-model": t.distributionModel,
+                  class: r({ "tw-px-1": e.largeCard })
+                }, null, 8, ["use", "loan-amount", "status", "borrower-count", "name", "distribution-model", "class"])
+              ]))
+            ])
+          ]),
+          _: 1
+        }, 8, ["to", "href"]))
+      ]),
+      t.isLoading || typeof t.loanCallouts > "u" ? (a(), n(k, {
+        key: 0,
+        class: r(["tw-mt-1.5 tw-mb-1", { "tw-mx-1": e.largeCard }]),
+        style: { width: "60%", height: "1.75rem", "border-radius": "500rem" }
+      }, null, 8, ["class"])) : (a(), n(A, {
+        key: 1,
+        callouts: t.loanCallouts,
+        class: r(["tw-mt-1.5", { "tw-px-1": e.largeCard }]),
+        onClick: o[4] || (o[4] = (l) => u.$emit("jump-filter-page", l))
+      }, null, 8, ["callouts", "class"]))
+    ]),
+    d("div", {
+      class: r(["tw-flex tw-justify-between tw-mt-2", { "tw-px-1": e.largeCard }])
+    }, [
+      t.hasProgressData ? c("", !0) : (a(), s("div", H, [
+        w(k, {
+          class: "tw-mb-0.5",
+          style: { width: "70%", height: "1.3rem" }
+        }),
+        w(k, {
+          class: "tw-rounded",
+          style: { width: "70%", height: "0.5rem" }
+        })
+      ])),
+      d("div", null, [
+        t.sharesAvailable ? (a(), n(v(t.tag), {
+          key: 0,
+          to: t.readMorePath,
+          href: t.readMorePath,
+          class: "loan-card-progress tw-no-underline tw-mt-1",
+          "aria-label": "Loan progress",
+          onClick: o[5] || (o[5] = (l) => t.clickReadMore("Progress", l))
+        }, {
+          default: g(() => [
+            w(M, {
+              id: "loanProgress",
+              "money-left": t.unreservedAmount,
+              "progress-percent": t.fundraisingPercent,
+              class: "tw-text-black"
+            }, null, 8, ["money-left", "progress-percent"])
+          ]),
+          _: 1
+        }, 8, ["to", "href"])) : c("", !0)
+      ]),
+      t.allDataLoaded ? (a(), n(P, {
+        key: 2,
+        loan: e.loan,
+        "unreserved-amount": t.unreservedAmount,
+        "basket-items": e.basketItems,
+        "is-loading": t.isLoading,
+        "is-adding": e.isAdding,
+        "enable-five-dollars-notes": e.enableFiveDollarsNotes,
+        "five-dollars-selected": e.fiveDollarsSelected,
+        "kv-track-function": e.kvTrackFunction,
+        "show-view-loan": e.showViewLoan,
+        "custom-loan-details": e.customLoanDetails,
+        "external-links": e.externalLinks,
+        route: e.route,
+        "user-balance": e.userBalance,
+        "get-cookie": e.getCookie,
+        "set-cookie": e.setCookie,
+        "is-visitor": e.isVisitor,
+        "primary-button-text": e.primaryButtonText,
+        "secondary-button-text": e.secondaryButtonText,
+        "secondary-button-handler": e.secondaryButtonHandler,
+        class: r(["tw-mt-auto", { "tw-w-full": !t.sharesAvailable }]),
+        onAddToBasket: o[6] || (o[6] = (l) => u.$emit("add-to-basket", l)),
+        onShowLoanDetails: o[7] || (o[7] = (l) => t.clickReadMore("ViewLoan", l)),
+        onRemoveFromBasket: o[8] || (o[8] = (l) => u.$emit("remove-from-basket", l))
+      }, null, 8, ["loan", "unreserved-amount", "basket-items", "is-loading", "is-adding", "enable-five-dollars-notes", "five-dollars-selected", "kv-track-function", "show-view-loan", "custom-loan-details", "external-links", "route", "user-balance", "get-cookie", "set-cookie", "is-visitor", "primary-button-text", "secondary-button-text", "secondary-button-handler", "class"])) : (a(), n(k, {
+        key: 1,
+        class: "tw-rounded tw-self-start",
+        style: { width: "9rem", height: "3rem" }
+      }))
+    ], 2),
+    e.showContributors && m.lendersNumber && m.amountLent ? (a(), s("div", O, [
+      d("p", null, b(m.lendersNumber) + " people contributed " + b(m.amountLent), 1)
+    ])) : c("", !0),
+    e.combinedActivities.length > 0 ? (a(), s("div", q, [
+      o[10] || (o[10] = d("hr", { class: "tw-border-tertiary tw-mb-1 tw-w-5/6 tw-mx-auto" }, null, -1)),
+      w(B, {
+        loan: e.loan,
+        "combined-activities": e.combinedActivities,
+        "kv-track-function": e.kvTrackFunction,
+        "basket-items": e.basketItems,
+        "is-adding": e.isAdding,
+        "enable-five-dollars-notes": e.enableFiveDollarsNotes,
+        "five-dollars-selected": e.fiveDollarsSelected,
+        "show-view-loan": e.showViewLoan,
+        "custom-loan-details": e.customLoanDetails,
+        "external-links": e.externalLinks,
+        route: e.route,
+        "user-balance": e.userBalance,
+        "get-cookie": e.getCookie,
+        "set-cookie": e.setCookie,
+        "error-msg": e.errorMsg,
+        "is-visitor": e.isVisitor,
+        onAddToBasket: o[9] || (o[9] = (l) => u.$emit("add-to-basket", l))
+      }, null, 8, ["loan", "combined-activities", "kv-track-function", "basket-items", "is-adding", "enable-five-dollars-notes", "five-dollars-selected", "show-view-loan", "custom-loan-details", "external-links", "route", "user-balance", "get-cookie", "set-cookie", "error-msg", "is-visitor"])
+    ])) : c("", !0)
+  ], 6);
+}
+const $ = /* @__PURE__ */ F(N, [["render", J], ["__scopeId", "data-v-44561e04"]]);
 export {
-  ve as KV_CLASSIC_LOAN_CARD_FRAGMENT,
-  ye as KV_CLASSIC_LOAN_CARD_USER_FRAGMET,
-  Ce as default
+  ae as KV_CLASSIC_LOAN_CARD_FRAGMENT,
+  oe as KV_CLASSIC_LOAN_CARD_USER_FRAGMET,
+  $ as default
 };

package/dist/vue/KvCompactLoanCard.css

@@ -1 +1 @@
-.loan-card-use[data-v-02aa45c6]:hover,.loan-card-use[data-v-02aa45c6]:focus{--tw-text-opacity: 1;color:rgba(var(--text-primary),var(--tw-text-opacity, 1))}.loan-card-active-hover:hover .loan-card-use[data-v-02aa45c6]{text-decoration-line:underline}.loan-card-progress[data-v-02aa45c6]:hover,.loan-card-progress[data-v-02aa45c6]:focus{text-decoration-line:none}.loan-card-use-text[data-v-02aa45c6] p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden;text-overflow:ellipsis}.loan-card-cta[data-v-02aa45c6] form,.loan-card-cta[data-v-02aa45c6] fieldset,.loan-card-cta[data-v-02aa45c6] .tw-w-full,.loan-card-cta[data-v-02aa45c6] button{height:40px!important;max-height:40px!important;display:flex!important;align-items:center!important;justify-content:center!important}.loan-card-cta[data-v-02aa45c6] .tw-inline-flex{height:40px!important;max-height:40px!important;min-height:40px!important}[data-v-02aa45c6] .amount-dropdown select{height:2.25rem;--tw-border-opacity: 1;border-color:rgb(245 245 245 / var(--tw-border-opacity, 1));padding-left:.5rem}[data-v-02aa45c6] .goal-variant-callouts span{font-weight:500}.goal-variant-progress-group[data-v-02aa45c6] div[role=progressbar]{background-color:#d9d9d9}
+.loan-card-use[data-v-330ff302]:hover,.loan-card-use[data-v-330ff302]:focus{--tw-text-opacity: 1;color:rgba(var(--text-primary),var(--tw-text-opacity, 1))}.loan-card-active-hover:hover .loan-card-use[data-v-330ff302]{text-decoration-line:underline}.loan-card-progress[data-v-330ff302]:hover,.loan-card-progress[data-v-330ff302]:focus{text-decoration-line:none}.loan-card-use-text-light-detailed[data-v-330ff302] p{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.loan-card-cta[data-v-330ff302] form,.loan-card-cta[data-v-330ff302] fieldset,.loan-card-cta[data-v-330ff302] .tw-w-full,.loan-card-cta[data-v-330ff302] button{display:flex!important;height:2.5rem!important;max-height:2.5rem!important;align-items:center!important;justify-content:center!important}.loan-card-cta[data-v-330ff302] .tw-inline-flex{height:2.5rem!important;max-height:2.5rem!important;min-height:2.5rem!important}[data-v-330ff302] .amount-dropdown select{height:2.25rem;--tw-border-opacity: 1;border-color:rgb(245 245 245 / var(--tw-border-opacity, 1));padding-left:.5rem}[data-v-330ff302] .goal-variant-callouts span{font-weight:500}.goal-variant-progress-group[data-v-330ff302] div[role=progressbar]{background-color:#d9d9d9}.light-detailed-progress-group[data-v-330ff302] p:first-of-type{margin-bottom:.5rem}