Как правильно разместить такие стрелки?

#wrp { 
  position: relative; 
  clear: both; 
  width: 100%; 
  max-width: 600px; 
  margin: 0 auto; 
  padding-top: 100px; 
} 
 
.wrp__img { 
  width: 220px; 
} 
 
.wrp__img img { 
  width: 200px; 
  height: 200px; 
  border-radius: 200px; 
} 
 
.wrp__right .wrp__img, 
.wrp__right .wrp__img img { 
  float: right; 
} 
 
.wrp__left .wrp__img, 
.wrp__left .wrp__img img { 
  float: left; 
} 
 
#arrow__wrp__right, 
#arrow__wrp__left { 
  position: absolute; 
  overflow: hidden; 
  top: 40px; 
  height: 60px; 
} 
 
#arrow__wrp__right { 
  right: 150px; 
} 
 
#arrow__wrp__left { 
  left: 150px; 
} 
 
#arrow__wrp__right div, 
#arrow__wrp__left div { 
  width: 300px; 
  height: 300px; 
  border: 2px dashed steelblue; 
} 
 
#arrow__wrp__right.arrow div, 
#arrow__wrp__left.arrow div { 
  border-color: transparent transparent transparent steelblue; 
  transform: rotate(90deg); 
} 
 
#arrow__right, 
#arrow__left { 
  position: relative; 
  width: 100px; 
  border-radius: 300px 0 0 300px; 
} 
 
#arrow__right:before { 
  content: ""; 
  display: block; 
  position: absolute; 
  top: 41px; 
  left: 36px; 
  width: 7px; 
  height: 7px; 
  border-top: 2px solid steelblue; 
  border-right: 2px solid steelblue; 
} 
 
#arrow__right:after { 
  content: ""; 
  display: block; 
  position: absolute; 
  bottom: 35px; 
  left: 42px; 
  width: 6px; 
  height: 6px; 
  border: 2px solid steelblue; 
  border-radius: 10px; 
} 
 
#arrow__left:before { 
  content: ""; 
  display: block; 
  position: absolute; 
  bottom: 40px; 
  left: 38px; 
  width: 7px; 
  height: 7px; 
  border-bottom: 2px solid steelblue; 
  border-right: 2px solid steelblue; 
} 
 
#arrow__left:after { 
  content: ""; 
  display: block; 
  position: absolute; 
  top: 38px; 
  left: 40px; 
  width: 6px; 
  height: 6px; 
  border: 2px solid steelblue; 
  border-radius: 10px; 
} 
 
h2 { 
  color: steelblue; 
  font-weight: bold; 
} 
 
p { 
  color: darkslategray; 
} 
 
.wrp__right h2, 
.wrp__right p { 
  text-align: left; 
} 
 
.wrp__left h2, 
.wrp__left p { 
  text-align: right; 
}

<div id="wrp" class="wrp__right"> 
  <div class="wrp__img"><img src="https://pbs.twimg.com/profile_images/644328118229012480/wzQ9Y12I_400x400.jpg"></div> 
  <div class="wrp__text"> 
    <h2>Кошка со своенравным характером</h2> 
    <p>Кошка — это существо со своенравным гордым характером и очень отзывчивое на ласку хозяина. Котята очень быстро привязываются к человеку и активно с ним играют.</p> 
  </div> 
  <div id="arrow__wrp__right" class="arrow"> 
    <div id="arrow__right"></div> 
  </div> 
</div> 
<div id="wrp" class="wrp__left"> 
  <div class="wrp__img"><img src="https://cache3.youla.io/files/images/780_780/58/1a/581a340086302ec926b91a62.jpg"></div> 
  <div class="wrp__text"> 
    <h2>Кошка</h2> 
    <p>Кошка — это существо со своенравным гордым характером и очень отзывчивое на ласку хозяина. Котята очень быстро привязываются к человеку и активно с ним играют.</p> 
  </div> 
  <div id="arrow__wrp__left" class="arrow"> 
    <div id="arrow__left"></div> 
  </div> 
</div>

html, 
body { 
  height: 100%; 
} 
 
svg { 
  padding: 0 30px; 
} 
 
text { 
  white-space: pre-wrap 
} 
 
.b2 { 
  transform: translateY(200px); 
}

<svg viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
  <defs> 
    <clipPath id="clip"> 
      <circle cx="570" cy="140" r="70" fill="blue" /> 
    </clipPath>  
     
  <clipPath id="clip2"> 
    <circle cx="70" cy="140" r="70" fill="blue" /> 
  </clipPath>  
     
    <g id="arrow"> 
    <path d="M170,70 Q280,0  390,70"  
          fill="none" 
          stroke="red" 
          stroke-width="2" 
          stroke-dasharray="4 4"/> 
 
    <circle cx="400" cy="75" r="4"  
            fill="none" 
            stroke="red" 
            stroke-width="2"/> 
 
    <path d="M178,75 170,70 174,59" fill="none" stroke="red" 
          stroke-width="2" /> 
    </g> 
  </defs> 
 
<g> 
  <image xlink:href="https://avatars.mds.yandex.net/get-pdb/225396/0fa14049-dc70-47ad-93c2-f6b0f46f43f5/s1200" 
         x="500" y="70" 
         width="150" 
         height="150" 
         rx="200" 
         preserveAspectRatio="none" 
         clip-path="url(#clip)"/> 
  <use href="#arrow" x="80"/> 
  <text x="0" y="80" font-size="20" fill="lightblue"> 
    Оставляет ваш салон  
    свободным 
  </text> 
    <text x="0" y="130" font-size="12"> 
Автомобильное сидение не предназначено 
для маленьких детей. Оно не безопасно  
при столкновении, так как штатные ремни 
в машине не рассчитаны на маленький рост 
пассажира. В связи с этим были внесены. 
  </text> 
</g> 
<!----> 
   
<g  class="b2"> 
  <image xlink:href="https://2.allegroimg.com/original/03f3be/af53f6ed471987d8c1e34046d962" 
         x="0" y="70" 
         width="150" 
         height="150" 
         rx="200" 
         preserveAspectRatio="none" 
         clip-path="url(#clip2)"/> 
   
  <use href="#arrow" x="-20"/> 
  <text x="400" y="80" font-size="20" fill="lightblue"> 
    Оставляет ваш салон  
    свободным 
  </text> 
    <text x="400" y="130" font-size="12"> 
Категория 0 (до 10 кг) имеет второе название 
«автолюлька»,так как сделано в виде люльки 
коляски. На практике используется до  
возраста 6 месяцев. Главный плюс –  
горизонтальное положение. Обязательно  
для перевозки недоношенных и слабых детей  
  </text> 
</g> 
</svg>