/*
 * home-feat-b.css: ops, insight, guest and promo of the home page.
 * Every selector sits under the root class .h-feat-b.
 * Own class names, custom properties and keyframes start with hfb- (--hfb-*, @keyframes hfb-*).
 * Shared pieces come from base.css (tokens, breakpoints, data-appear presets) and home-base.css (.hb-*).
 * Breakpoints: desktop as the base rule, then @media (min-width: 810px) and (max-width: 1199.98px),
 * then @media (max-width: 809.98px).
 *
 *   1. Shared pieces: kicker icon colors, card text, body text, emoji, breakpoint toggles
 *   2. Ops      (data-section="feat-ops"):     a static chatbot card and a card with a moving list
 *   3. Insight  (data-section="feat-insight"): a dashboard picture with text laid over it
 *   4. Guest    (data-section="feat-guest"):   check-in, review and message cards
 *   5. Promo    (data-section="feat-promo"):   a gradient card with four channel chips
 *   6. Tablet   (810 to 1199.98)
 *   7. Mobile   (809.98 and below)
 *
 * Values are computed values of the original page at twelve widths from 1920 to 360.
 * The faces are registered as weight 400, so every text rule keeps
 * font-weight 400. Shadow colors keep the original hex alpha (#c2c2c240), not a rounded decimal.
 * Elements toggled per breakpoint (.hfb-only-* .hfb-not-*) get their display only from section 1,
 * 6 and 7, so no other rule here sets display on them.
 */

/* 1. Shared pieces ---------------------------------------------------------------------- */
/* The kicker icon drawing and pictures that fill their box come from home-base.css. */
.h-feat-b .hfb-kicon-ops { color: rgb(250, 194, 110); }
.h-feat-b .hfb-kicon-insight { color: rgb(125, 147, 232); }
.h-feat-b .hfb-kicon-guest { color: rgb(222, 129, 129); }
.h-feat-b .hfb-kicon-promo { color: rgb(98, 211, 119); }

/* Text column inside a card: label above, line below. Gap 10px (mobile 4px). */
.h-feat-b .hfb-ctext {
  display: flex; flex-direction: column; flex-wrap: nowrap;
  align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: min-content; padding: 0; margin: 0;
  flex: none; position: relative; z-index: 1;
}

/* Card text: Bold 26px / 1.4em at the start edge. .hfb-ct-lab drops to 20px on tablet,
 * .hfb-ct-sm to 18px. Every card text is 20px on mobile. */
.h-feat-b .hfb-ct {
  margin: 0; padding: 0; font-style: normal; font-weight: 400; letter-spacing: normal;
  text-transform: none; text-decoration: none;
  font-family: var(--font-bold); font-size: 26px; line-height: 1.4em; text-align: start;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
  width: 100%; height: auto; flex: none; position: relative;
}

/* Body text preset 1r3ju0s: SemiBold 19px / 1.4em #333 (tablet 15px, mobile 14px), one line. */
.h-feat-b .hfb-p19 {
  margin: 0; padding: 0; font-style: normal; font-weight: 400; letter-spacing: normal;
  text-transform: none; text-decoration: none;
  font-family: var(--font-semibold); font-size: 19px; line-height: 1.4em;
  color: var(--c-text); text-align: start; white-space: pre;
  width: auto; height: auto; flex: none; position: relative;
}

/* An emoji picture (Twemoji SVG) that fills its square box. */
.h-feat-b .hfb-emoji {
  display: block; flex: none; width: 32px; height: 32px; position: relative; overflow: hidden;
}
.h-feat-b .hfb-emoji-40 { width: 40px; height: 40px; }
.h-feat-b .hfb-emoji-42 { width: 42px; height: 42px; }
.h-feat-b .hfb-emoji img {
  display: block; width: 100%; height: 100%;
  object-fit: contain; background-color: transparent;
}

/* Breakpoint toggles: the original has a separate text per breakpoint in a few places. */
.h-feat-b .hfb-only-t,
.h-feat-b .hfb-only-m { display: none; }

/* 2. Ops ----------------------------------------------------------------------------------
 * Two cards in a row of 1000px. Left: a white picture box with a speech bubble and the chatbot
 * picture, cut off at the box edge. Right: a moving list of four questions (home-feat-b.js clones
 * it and moves it up at 20px per second). The list box has a soft fade at top and bottom.
 */
.h-feat-b .hfb-ops-row {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  align-items: center; justify-content: center; gap: 24px;
  width: 1000px; height: min-content; padding: 0; margin: 0;
  flex: none; position: relative; overflow: hidden;
}
.h-feat-b .hfb-ops-card {
  display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 30px;
  padding: 40px; margin: 0; position: relative; overflow: visible; border-radius: 40px;
}
.h-feat-b .hfb-ops-bot {
  justify-content: center; width: 49%; height: min-content; flex: none;
  background-color: #e3eeff;
}
.h-feat-b .hfb-ops-call {
  justify-content: flex-start; flex: 1 0 0px; width: 1px; height: 693px;
  background: linear-gradient(138deg, #e4dbff, #afc3ed);
}
.h-feat-b .hfb-ops-bot-label { color: rgb(57, 80, 115); }
.h-feat-b .hfb-ops-bot-line { color: rgb(147, 170, 204); }
.h-feat-b .hfb-ops-call-label { color: rgb(56, 74, 133); }
.h-feat-b .hfb-ops-call-line { color: rgb(126, 138, 204); }

.h-feat-b .hfb-ops-shot {
  flex: none; width: 420px; height: 499px; position: relative; overflow: hidden;
  background-color: #fff; border-radius: 31px; box-shadow: 10px 10px 35px #c2c2c240;
}
.h-feat-b .hfb-ops-bubble {
  display: flex; flex-direction: column; flex-wrap: nowrap;
  align-items: flex-end; align-content: flex-end; justify-content: center; gap: 10px;
  position: absolute; left: 88px; top: 37px; width: 75%; height: min-content;
  padding: 16px; margin: 0; flex: none; overflow: hidden;
  background-color: #f2f2f2; border-radius: 15px;
}
.h-feat-b .hfb-ops-ask {
  margin: 0; padding: 0; font-style: normal; font-weight: 400; letter-spacing: normal;
  text-transform: none; text-decoration: none;
  font-family: var(--font-medium); font-size: 16px; line-height: 1.2em;
  color: rgb(48, 48, 48); text-align: start; white-space: pre;
  width: auto; height: auto; flex: none; position: relative;
}
.h-feat-b .hfb-ops-botimg {
  position: absolute; bottom: 6px; left: 50%; transform: translate(-50%);
  width: 394px; height: auto; aspect-ratio: 1.0480225988700564 / 1;
  flex: none; overflow: visible;
}

/* The moving list. The frame clips it and fades both ends. The list starts at translateY(0). */
.h-feat-b .hfb-ticker-box { flex: 1 0 0px; width: 400px; height: 1px; position: relative; }
.h-feat-b .hfb-ticker {
  display: flex; place-items: center;
  width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  margin: 0; padding: 10px; list-style-type: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 12.5%, rgba(0, 0, 0, 1) 87.5%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 12.5%, rgba(0, 0, 0, 1) 87.5%, rgba(0, 0, 0, 0) 100%);
}
.h-feat-b .hfb-ticker-list {
  display: flex; flex-direction: column; place-items: center; gap: 12px;
  width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  margin: 0; padding: 0; list-style-type: none;
  position: relative; will-change: transform; transform: translateY(0px);
}
/* flex: none keeps every item at its height: the list is shorter than its items on purpose. */
.h-feat-b .hfb-tk-item {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  align-items: center; justify-content: center; gap: 10px;
  width: 333px; height: min-content; padding: 40px; margin: 0;
  flex: none; position: relative; overflow: hidden;
  background-color: #fff; border-radius: 20px;
}
.h-feat-b .hfb-tk-clone { will-change: transform; }

/* 3. Insight -------------------------------------------------------------------------------
 * A white card holding the dashboard picture (ratio 1.618). Two question blocks sit over the
 * picture: centered vertically on desktop, at the top on tablet, in a 221px band on mobile.
 * The second answer mixes sizes as in the original: the h3 is 22px, its text pieces 26px
 * (tablet 24px) and its line-break pieces always 26px, so the tablet lines are 39, 39 and 36.
 */
.h-feat-b .hfb-in-card {
  display: flex; flex-direction: column; flex-wrap: nowrap;
  align-items: center; justify-content: center; gap: 30px;
  width: 100%; height: min-content; padding: 0; margin: 0;
  flex: none; position: relative; overflow: visible;
  background-color: #fff; border-radius: 20px;
}
.h-feat-b .hfb-in-frame {
  flex: none; width: 100%; height: auto; aspect-ratio: 1.6181229773462784 / 1;
  position: relative; overflow: visible; border-radius: 40px;
}
.h-feat-b .hfb-in-over {
  display: flex; flex-direction: column; flex-wrap: nowrap;
  align-items: flex-start; align-content: flex-start; justify-content: flex-start; gap: 24px;
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 100%; height: min-content; padding: 60px; margin: 0;
  flex: none; overflow: hidden;
}
.h-feat-b .hfb-in-block {
  display: flex; flex-direction: column; flex-wrap: nowrap;
  align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: min-content; padding: 0; margin: 0;
  flex: none; position: relative; overflow: hidden;
}
/* line-height is a number so the mixed-size pieces of the second answer get 1.5 of their own size. */
.h-feat-b .hfb-in-t {
  margin: 0; padding: 0; font-style: normal; font-weight: 400; letter-spacing: normal;
  text-transform: none; text-decoration: none;
  font-family: var(--font-bold); font-size: 26px; line-height: 1.5; text-align: left;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
  width: 100%; height: auto; flex: none; position: relative;
}
.h-feat-b .hfb-in-q { color: rgb(85, 73, 156); }
.h-feat-b .hfb-in-a { color: rgb(193, 185, 237); }
.h-feat-b .hfb-in-t.hfb-in-mix { font-size: 22px; }
.h-feat-b .hfb-in-big,
.h-feat-b .hfb-in-brk { font-size: 26px; }

/* 4. Guest ---------------------------------------------------------------------------------
 * The block is 812px tall on desktop and tablet. The row below the head takes the rest:
 * a left column (check-in card 334px, then the review card) and the message card on the right.
 * The columns share the width equally before padding, so the right one is 80px wider.
 */
.h-feat-b.hfb-guest { height: 812px; }
.h-feat-b .hfb-g-head { align-items: center; align-content: center; }
.h-feat-b .hfb-g-row {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  align-items: center; justify-content: center; gap: 20px;
  flex: 1 0 0px; width: 1000px; height: 1px; padding: 0; margin: 0;
  position: relative; overflow: hidden;
}
.h-feat-b .hfb-g-left {
  display: flex; flex-direction: column; flex-wrap: nowrap;
  align-items: center; justify-content: center; gap: 20px;
  flex: 1 0 0px; width: 1px; height: 100%; padding: 0; margin: 0;
  position: relative; overflow: hidden;
}
.h-feat-b .hfb-g-checkin {
  display: flex; flex-direction: column; flex-wrap: nowrap;
  align-items: center; justify-content: flex-start; gap: 30px;
  width: 100%; height: 334px; padding: 40px; margin: 0;
  flex: none; position: relative; overflow: hidden;
  background-color: #ffeae3; border-radius: 20px;
}
.h-feat-b .hfb-g-checkin-label { color: rgb(133, 53, 53); }
.h-feat-b .hfb-g-checkin-line { color: rgb(204, 123, 120); }
.h-feat-b .hfb-g-list {
  display: flex; flex-direction: column; flex-wrap: nowrap;
  align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: min-content; padding: 0; margin: 0;
  flex: none; position: relative; overflow: hidden;
}
.h-feat-b .hfb-g-item {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 85px; padding: 0; margin: 0;
  flex: none; position: relative; overflow: hidden;
  background-color: #fff; border-radius: 20px;
}
.h-feat-b .hfb-g-item-dim { opacity: .7; }
.h-feat-b .hfb-g-revwrap {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  align-items: center; justify-content: center; gap: 10px;
  flex: 1 0 0px; width: 100%; height: 1px; padding: 0; margin: 0;
  position: relative; overflow: hidden;
}
.h-feat-b .hfb-g-review {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  align-items: flex-start; align-content: flex-start; justify-content: flex-start; gap: 30px;
  flex: 1 0 0px; width: 1px; height: 100%; padding: 40px; margin: 0;
  position: relative; overflow: visible;
  background-color: #f5fbff; border-radius: 20px;
}
.h-feat-b .hfb-g-revtext { flex: 1 0 0px; width: 1px; }
.h-feat-b .hfb-g-revhead {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: min-content; padding: 0; margin: 0;
  flex: none; position: relative; overflow: hidden;
}
.h-feat-b .hfb-g-review-label { flex: 1 0 0px; width: 1px; color: rgb(53, 84, 105); }
.h-feat-b .hfb-g-review-line { color: rgb(147, 178, 199); }
.h-feat-b .hfb-g-talk {
  display: flex; flex-direction: column; flex-wrap: nowrap;
  align-items: center; justify-content: center; gap: 30px;
  flex: 1 0 0px; width: 1px; height: 100%; padding: 40px; margin: 0;
  position: relative; overflow: visible;
  background-color: #fff4e3; border-radius: 40px;
}
.h-feat-b .hfb-g-talk-label { color: rgb(153, 113, 38); }
.h-feat-b .hfb-g-talk-line { color: rgb(204, 175, 120); }
.h-feat-b .hfb-g-msg {
  display: flex; flex-direction: column; flex-wrap: nowrap;
  align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: min-content; padding: 20px 40px; margin: 0;
  flex: none; position: relative; overflow: hidden;
  background-color: #fff; border-radius: 40px;
}
.h-feat-b .hfb-g-msghead {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  align-items: center; justify-content: space-between;
  width: 100%; height: min-content; padding: 0; margin: 0;
  flex: none; position: relative; overflow: visible;
}
/* Preset 1w9q4kh: Bold 22px / 1.5em #333 (tablet 20px, mobile 16px). */
.h-feat-b .hfb-g-msgtitle {
  margin: 0; padding: 0; font-style: normal; font-weight: 400; letter-spacing: normal;
  text-transform: none; text-decoration: none;
  font-family: var(--font-bold); font-size: 22px; line-height: 1.5em;
  color: var(--c-text); text-align: start; white-space: pre;
  width: auto; height: auto; flex: none; position: relative;
}
.h-feat-b .hfb-g-badge {
  display: block; flex: none; width: 60px; height: 60px; aspect-ratio: 1 / 1;
  position: relative; overflow: visible;
  background-color: #ffeccf; border-radius: 43px; box-shadow: 2px 3px 28px #ffeccf;
}
.h-feat-b .hfb-g-badge .hfb-emoji { position: absolute; left: calc(50% - 42px / 2); top: calc(50% - 42px / 2); }
.h-feat-b .hfb-g-msgbody {
  color: rgb(163, 163, 163); white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
  width: 100%;
}

/* 5. Promo ---------------------------------------------------------------------------------
 * A gradient card: the heading, then two rows of two white chips (one column of four on mobile).
 * The chip rows stretch to the wider row, so the narrower row is centered in it.
 */
.h-feat-b .hfb-pr-card {
  display: flex; flex-direction: column; flex-wrap: nowrap;
  align-items: center; justify-content: center; gap: 30px;
  width: 100%; height: min-content; padding: 40px; margin: 0;
  flex: none; position: relative; overflow: visible;
  background: linear-gradient(99deg, #d5f0d7, #c1e0cb); border-radius: 40px;
}
.h-feat-b .hfb-pr-headline {
  margin: 0; padding: 0; font-style: normal; font-weight: 400; letter-spacing: normal;
  text-transform: none; text-decoration: none;
  font-family: var(--font-bold); font-size: 32px; line-height: 1.4em;
  color: rgb(63, 110, 92); text-align: center; white-space: pre;
  width: auto; height: auto; flex: none; position: relative; z-index: 1;
}
.h-feat-b .hfb-pr-chips {
  display: flex; flex-direction: column; flex-wrap: nowrap;
  align-items: center; justify-content: center; gap: 10px;
  width: min-content; height: min-content; padding: 0; margin: 0;
  flex: none; position: relative; overflow: hidden;
}
.h-feat-b .hfb-pr-row {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  align-items: center; justify-content: center; gap: 10px; align-self: stretch;
  width: auto; height: min-content; padding: 0; margin: 0;
  flex: none; position: relative; overflow: hidden;
}
.h-feat-b .hfb-pr-chip {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  align-items: center; justify-content: center; gap: 10px;
  width: min-content; height: 93px; padding: 30px 40px; margin: 0;
  flex: none; position: relative; overflow: hidden; z-index: 1;
  background-color: #fff; border-radius: 47px;
}
.h-feat-b .hfb-pr-img {
  display: block; flex: none; width: 47px; height: 47px; aspect-ratio: 1 / 1;
  position: relative; overflow: visible;
}
.h-feat-b .hfb-pr-svg {
  display: block; flex: none; aspect-ratio: 1 / 1; position: relative; image-rendering: pixelated;
}
.h-feat-b .hfb-pr-svg > svg { display: block; width: 100%; height: 100%; }
.h-feat-b .hfb-pr-svg-32 { width: 32px; height: 32px; fill: rgb(255, 207, 145); color: rgb(255, 207, 145); }
.h-feat-b .hfb-pr-svg-42 { width: 42px; height: 42px; fill: black; color: black; }
.h-feat-b .hfb-pr-t { color: rgb(130, 130, 130); }

/* 6. Tablet (810 to 1199.98) ---------------------------------------------------------------- */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .h-feat-b .hfb-only-t { display: block; }
  .h-feat-b .hfb-not-t { display: none; }
  .h-feat-b .hfb-ct-lab { font-size: 20px; }
  .h-feat-b .hfb-ct-sm { font-size: 18px; }
  .h-feat-b .hfb-p19 { font-size: 15px; }

  /* Ops: both cards 547px tall. The white box keeps its ratio and runs past the left card's
   * bottom, so the row cuts it off there, as in the original. */
  .h-feat-b .hfb-ops-row { width: 100%; }
  .h-feat-b .hfb-ops-bot { flex: 1 0 0px; width: 1px; height: 547px; justify-content: flex-start; }
  .h-feat-b .hfb-ops-call { height: 547px; }
  .h-feat-b .hfb-ops-shot { width: 100%; height: auto; aspect-ratio: .8416833667334669 / 1; }
  .h-feat-b .hfb-ops-bubble { left: 55%; top: 24px; transform: translate(-50%); width: 83%; }
  .h-feat-b .hfb-ops-ask {
    font-size: 11px; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; width: 100%;
  }
  .h-feat-b .hfb-ops-botimg { bottom: -1px; width: 96%; }

  /* Insight: the text box is as tall as the picture and as wide as its 610px lines. */
  .h-feat-b .hfb-in-over { height: 100%; width: min-content; }
  .h-feat-b .hfb-in-block { width: min-content; }
  .h-feat-b .hfb-in-t { font-size: 24px; width: 610px; }
  .h-feat-b .hfb-in-big { font-size: 24px; }

  /* Guest: the head keeps its desktop sizes (22px kicker, 36px title) in the original. */
  .h-feat-b.hfb-guest .hb-kicker { font-size: 22px; }
  .h-feat-b.hfb-guest .hb-title { font-size: 36px; }
  .h-feat-b .hfb-g-row { width: 100%; }
  .h-feat-b .hfb-g-msg { flex: 1 0 0px; height: 1px; }
  .h-feat-b .hfb-g-msgtitle { font-size: 20px; }

  .h-feat-b .hfb-pr-headline { font-size: 28px; }
}

/* 7. Mobile (809.98 and below) -------------------------------------------------------------- */
@media (max-width: 809.98px) {
  .h-feat-b .hfb-only-m { display: block; }
  .h-feat-b .hfb-not-m { display: none; }
  .h-feat-b .hfb-ctext { gap: 4px; }
  .h-feat-b .hfb-ct { font-size: 20px; }
  .h-feat-b .hfb-p19 { font-size: 14px; }

  /* Ops: the cards stack. The 400px list box is wider than the card, which clips it. */
  .h-feat-b .hfb-ops-row { flex-direction: column; width: 100%; }
  .h-feat-b .hfb-ops-card { border-radius: 14px; overflow: hidden; padding: 20px; }
  .h-feat-b .hfb-ops-bot { width: 100%; }
  .h-feat-b .hfb-ops-call { flex: none; width: 100%; height: min-content; }
  .h-feat-b .hfb-ops-shot { width: 100%; height: auto; aspect-ratio: .8416833667334669 / 1; }
  .h-feat-b .hfb-ops-bubble { left: auto; right: 16px; top: 36px; width: min-content; }
  .h-feat-b .hfb-ops-ask { font-size: 13px; }
  .h-feat-b .hfb-ops-botimg { bottom: -3px; width: 310px; }
  .h-feat-b .hfb-ticker-box { flex: none; height: 355px; }

  /* Insight: a 221px band over the picture, 10px text, kicker row gap 4px. */
  .h-feat-b.hfb-insight .hb-krow { gap: 4px; }
  .h-feat-b .hfb-in-frame { border-radius: 14px; }
  .h-feat-b .hfb-in-over {
    border-radius: 14px; gap: 0; height: 221px; justify-content: center; padding: 20px;
    right: 0; top: calc(49.77375565610862% - 221px / 2); transform: none; width: auto;
  }
  .h-feat-b .hfb-in-block { align-items: flex-start; align-content: flex-start; flex: 1 0 0px; gap: 0; height: 1px; width: min-content; }
  .h-feat-b .hfb-in-t { font-size: 10px; white-space: pre; width: auto; }

  /* Guest: everything stacks and takes its content height. */
  .h-feat-b.hfb-guest { height: min-content; }
  .h-feat-b .hfb-g-row { flex: none; flex-direction: column; height: min-content; width: 100%; }
  .h-feat-b .hfb-g-left { flex: none; height: min-content; width: 100%; }
  .h-feat-b .hfb-g-checkin { border-radius: 14px; height: min-content; padding: 20px; }
  .h-feat-b .hfb-g-revwrap { flex: none; height: min-content; }
  .h-feat-b .hfb-g-review { border-radius: 14px; height: min-content; overflow: hidden; padding: 20px; }
  .h-feat-b .hfb-g-talk {
    border-radius: 14px; flex: none; height: min-content; overflow: hidden; padding: 20px; width: 100%;
  }
  .h-feat-b .hfb-g-msg { border-radius: 22px; padding: 20px; }
  .h-feat-b .hfb-g-msgtitle { font-size: 16px; }

  /* Promo: one column of full-width chips. */
  .h-feat-b .hfb-pr-card { border-radius: 14px; overflow: hidden; padding: 20px; }
  .h-feat-b .hfb-pr-headline { font-size: 22px; }
  .h-feat-b .hfb-pr-chips { width: 100%; }
  .h-feat-b .hfb-pr-row { align-self: auto; flex-direction: column; width: 100%; }
  .h-feat-b .hfb-pr-chip { width: 100%; }
}