/* Speech bubble containment on phones. Not a mockup file.
   The mockup stretches each doodle SVG over the whole bubble (100% 100%), so the
   outline's top edge sits at about 27% of the bubble height. In the narrow phone
   columns the text wraps to 4 or 5 lines, the bubble grows taller, the outline's
   top edge moves below the fixed top padding and the first line crosses it.
   Here the doodle is drawn as a 9-slice border image instead: the tail and the
   corners keep a fixed size and only the straight runs stretch, so a fixed
   padding always clears the outline whatever the number of lines or the font
   metrics. Phones only; tablet and desktop keep the mockup drawing. */
@media (max-width: 767px) {
  rd-body.feedback-r10 .hero-art .rocky-speech::before,
  rd-body.feedback-r10 .service-art .rocky-speech::before,
  rd-body.feedback-r10 .founder-photo .founder-speech::before {
    background: none !important;
    border-style: solid;
    border-color: transparent;
    /* slices in the 2x SVG's pixels (480 x 300): tail and top left corner,
       right side, bottom, left side; fill paints the middle */
    border-image-source: url('../bubble/doodle-hero-2x.svg');
    border-image-slice: 104 72 60 116 fill;
    border-image-repeat: stretch;
    /* drawn size of each slice, close to the mockup's phone proportions */
    border-width: 56px 22px 32px 36px;
    border-image-width: 56px 22px 32px 36px;
  }
  rd-body.feedback-r10 .service-art .rocky-speech::before {
    border-image-source: url('../bubble/doodle-service-2x.svg');
  }
  rd-body.feedback-r10 .founder-photo .founder-speech::before {
    border-image-source: url('../bubble/doodle-founder-2x.svg');
  }
  /* text box clears the drawn outline: top below the top edge, bottom above the
     bottom edge, left past the rd-body edge beside the tail */
  rd-body.feedback-r10 .hero-art .rocky-speech,
  rd-body.feedback-r10 .service-art .rocky-speech {
    padding: 46px 16px 22px 26px !important;
  }
  rd-body.feedback-r10 .founder-photo .founder-speech {
    padding: 46px 18px 22px 28px !important;
  }
}