.quote {
  --_quote_gap: var(--quote_gap, 24px);
  --_quote_c: var(--quote_c, #0081cc);
  --_quote_f-f: var(--quote_f-f, var(--f-f_s));
  --_quote_f-s: var(--quote_f-s, 22px);
  --_quote_f-w: var(--quote_f-w, var(--f-w_medium));
  --_quote_l-h: var(--quote_l-h, 30px);
  --_quote_m-w: var(--quote_m-w, 960px);

  --_quote-body_gap: var(--quote-body_gap, 16px);
  --_quote-body_f-d: var(--quote-body_f-d, column);

  --_quote-icon_c: var(--quote-icon_c, var(--_quote_c));
  --_quote-icon_w: var(--quote-icon_w, 48px);
  --_quote-icon_h: var(--quote-icon_h, 34px);

  --_quote-attribution_gap: var(--quote-attribution_gap, 8px);
  --_quote-attribution_p-i-s: var(--quote-attribution_p-i-s, 0px);

  --_quote-author_c: var(--quote-author_c, #000000);
  --_quote-author_f-f: var(--quote-author_f-f, var(--f-f_s));
  --_quote-author_f-s: var(--quote-author_f-s, 20px);
  --_quote-author_f-w: var(--quote-author_f-w, var(--f-w_medium));
  --_quote-author_l-h: var(--quote-author_l-h, 24px);

  --_quote-author-title_c: var(--quote-author-title_c, #222222);
  --_quote-author-title_f-f: var(--quote-author-title_f-f, var(--f-f));
  --_quote-author-title_f-s: var(--quote-author-title_f-s, 14px);
  --_quote-author-title_f-w: var(--quote-author-title_f-w, var(--f-w_light));
  --_quote-author-title_l-h: var(--quote-author-title_l-h, 20px);

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--_quote_gap);
  margin: 0;
  padding: 0;
  border: 0;
}

  .quote .quote-body {
    display: flex;
    flex-direction: var(--_quote-body_f-d);
    align-items: flex-start;
    gap: var(--_quote-body_gap);
  }

  .quote .quote-icon {
    display: block;
    flex: none;
    width: var(--_quote-icon_w);
    height: var(--_quote-icon_h);
    color: var(--_quote-icon_c);
  }

  .quote .quote-icon svg {
      display: block;
      width: 100%;
      height: 100%;
    }

  .quote .quote-text {
    display: flex;
    flex-direction: column;
    gap: var(--_quote_gap-p, 16px);
    word-break: break-word;
    max-width: var(--_quote_m-w);
    margin: 0;
    font-family: var(--_quote_f-f);
    font-size: var(--_quote_f-s);
    font-weight: var(--_quote_f-w);
    line-height: var(--_quote_l-h);
    color: var(--_quote_c);
  }

  .quote .quote-text p {
      margin: 0;
    }

  .quote .quote-attribution {
    display: flex;
    flex-direction: column;
    gap: var(--_quote-attribution_gap);
    padding-inline-start: var(--_quote-attribution_p-i-s);
  }

  .quote .quote-author {
    margin: 0;
    font-family: var(--_quote-author_f-f);
    font-size: var(--_quote-author_f-s);
    font-weight: var(--_quote-author_f-w);
    line-height: var(--_quote-author_l-h);
    color: var(--_quote-author_c);
  }

  .quote .quote-author-title {
    margin: 0;
    font-family: var(--_quote-author-title_f-f);
    font-size: var(--_quote-author-title_f-s);
    font-weight: var(--_quote-author-title_f-w);
    line-height: var(--_quote-author-title_l-h);
    color: var(--_quote-author-title_c);
  }

  @media (min-width: 48rem) {

  .quote {
    --_quote_gap: var(--quote_gap_desk, 40px);
    --_quote_f-s: var(--quote_f-s_desk, 28px);
    --_quote_l-h: var(--quote_l-h_desk, 40px);

    --_quote-body_f-d: var(--quote-body_f-d_desk, row);
    --_quote-body_gap: var(--quote-body_gap_desk, 32px);

    --_quote-icon_w: var(--quote-icon_w_desk, 78px);
    --_quote-icon_h: var(--quote-icon_h_desk, 56px);

    --_quote-attribution_p-i-s: var(
      --quote-attribution_p-i-s_desk,
      calc(var(--_quote-icon_w) + var(--_quote-body_gap))
    );

    --_quote-author_f-s: var(--quote-author_f-s_desk, 22px);

    --_quote-author-title_f-s: var(--quote-author-title_f-s_desk, 16px);
    --_quote-author-title_l-h: var(--quote-author-title_l-h_desk, 24px)
}
  }