I have bootstrap 5.02 page with the following diplay of a French area image:
<section id="regions_map" class="section impair pt-2 pb-5">
<div class="container">
<div class="offset-4 col-4">
<svg viewBox="0 0 248.7 385.54" xmlns="http://www.w3.org/2000/svg">
<defs>
<style>
.cls-1 {
fill: rgb(214, 159, 186);
stroke: #fff;
stroke-width: 0.5px;
}
.jmbdev_region:nth-of-type(1):hover path {
transition: ease 0.5s;
fill: #42b779;
}
.jmbdev_region:nth-of-type(2):hover path {
transition: ease 0.5s;
fill: #fa7b7f;
}
.jmbdev_region:nth-of-type(3):hover path {
transition: ease 0.5s;
fill: #fdd200;
}
.jmbdev_region:nth-of-type(4):hover path {
transition: ease 0.5s;
fill: #7cccc7;
}
.jmbdev_region:nth-of-type(5):hover path {
transition: ease 0.5s;
fill: #42b779;
}
.jmbdev_region:nth-of-type(6):hover path {
transition: ease 0.5s;
fill: #fa7b7f;
}
</style>
</defs>
<a class="jmbdev_region" href="#" title="Gironde">
<path class="cls-1" d="M96.39,239.29l-6,9-2,30-4,30-4,24v6l3-8,5-6,7,6,1,2,2,3-9,1-2-3-3,2-1,5-4,6v8h3l11-6,7,2-1,4-2,4,3,1,6-2,4,3h3l3-4,7-1,2,2,2,2v2l-1,2,6,2,3,2v3h4l4,5,2,8,6,2h6v-8h2l3,5,6-1,3-3-1-3-2-2,1-4h3l4-2-2-4-1-4,3-5,5-8,4-4,3-1v-4h-3l-2-4,1-3,5-1,3-1,4-1-1-7,4-2-5-3-4,5h-11l-1-2-4-2,3-3v-4l-1-2v-1l3-3,1-5,2-6-2-3h-4l-2-2-1,4-4-2-5,2-4-1-9-8h-5l-1-12-10-1v-5l-2,1h-10v3l3,10v11l-1,2-2-8-5-20-19-17,1-7-4-1Z" data-name="dep 33" id="dep_33"
title="33 - Gironde" />
</a>
<a class="jmbdev_region" href="#" title="Charente-Maritime">
<path class="cls-1" d="M111.39,156.29l-5,1-11,6,3,3-6,5-1,3-5,1-3-3-7-1-1-4-4-3-6,3,3,5h5l6,4,3,3,8-1,2,4,4,1,2,5,4,1-1,4-4-1-1,3,3,4-2,8h-4v5l1,2h-5l-1-3,4-4-2-3-1-1-1-9-6-1-5-6-1,13,8,6,1,7,2,8v8l5-1,7,6,5,3,1,4,4,1,11,11,3,13h10l2-2,1,5,9,1,1,12h6l8,9h4l5-2,4,2,3-6,2-5-7-5-2-3-4-4-7,1-3-1v-2l4-1v-1l-3-1-2-1,5-4v-3l-2-2,1-2,1-4-3-3-2-3-4-5-3-1,2-4h-1l-1-8-3-2,4-2h6l2-2h4l1,2h4l3-1,1-7,3-11-3-3-1-4-5-3-7-4-8,1-5-7h-7l-6-5v-2l-4-5-1-5-5-4-7,3Z" data-name="dep 17" id="dep_17"
title="17 - Charente-Maritime" />
</a>
<a class="jmbdev_region" href="#" title="Charente">
<path class="cls-1" d="M216.39,183.29l-3,2,1,5-2,2-6-3-5,1-7,1-4-6h-2l-6,4-5,1v2l-3,4,1,1-4,3-2,11-1,7-3,1h-4l-1-2h-4l-2,2h-6l-4,2,3,2,1,8h1l-2,3,3,2,4,4,2,4,3,3-1,4-1,2,2,2v3l-5,3,2,2,3,1v1l-4,1v2l3,1,7-1,4,4,2,3,7,5,2-2,7,1,3-3,7-7v-12l17-12v-9h6l3-6h2l1-6h3l2-5,3-1,5-3-1-9,3-1,7-1-1-4-1-5h-5l-3-3,2-4v-3l-3-1h-6l-3,3-7,3-2-3Z" data-name="dep 16" id="dep_16"
title="16 - Charente" />
</a>
<a class="jmbdev_region" href="#" title="Deux-Sèvres">
<path class="cls-1" d="M171.39,80.29l-10,1-9,1-10,1v5l-5,3-11-2-7,3,3,5v4l9,8-2,4,6,7-3,3,4,6,1,10-2,3,2,4-2,5v3l3-3,3,4-5,3-1,2-5,1-4,2h-1l1,6,4,4v2l5,5h8l5,7,8-1,7,4,5,3,1,4,3,3,3-2-1-2,3-4v-2l5-1,6-4,7-1,1-3-6-2-2-4,2-5,2-3v-6l-2-1-3,1v2l-2,3-3-4-1-2,2-3-3-2v-8h-2v-3l3-4v-2l2-4-2-3-4-2,4-6,2-3v-2l-3-3v-1l1-3-1-2,3-2-2-5-2-6v-4h-3l-1-8v1l-3-2Z" data-name="dep 79" id="dep_79"
title="79 - Deux-Sèvres" />
</a>
</svg>
</div>
</div>
I am trying to use the same section / container to display a different area for which I have the following :
<svg viewBox="0 0 1200 1080" xmlns="http://www.w3.org/2000/svg">
<defs>
<style>
.cls-1 {
fill: rgb(214, 159, 186);
stroke: #fff;
stroke-width: 0.5px;
}
</style>
</defs>
<a href="#" title="Côte Armor">
<path class="cls-1" d="M348.58,243.61l-3.42,2.69-8.82,1.12-1.96,2.67-6.09-4.63-7.99,5.38,2.98,4.08-5.32,7.29h-.24l-2.22,10.39,4.71,.29-.29,4.14,3.48,2.2-3.18,3.18-2.2,1.59,.29,3.75,4.77,1.59-4.42,1.28v4.69l2.93,3.75,.61,11.11-1.96,1.96,1.57,5.71,6.03,1.59,.65,3.18,3.79,.29,3.14-2.22,1.96,1.96,7.29,3.18,5.89-3.18,1.53-3.12,5.11-.35,5.69,5.07,5.4-1.3,4.69,4.63h2.3l2.2,2.81h4.46l1.53-2.22,1.96,4.14,4.77,1.96,5.89-3.81v-4.12l4.4-1.61h2.83l3.5,6.4,7.6,.61,3.77-4.79,4.12-8.82,5.38-1.96,2.81-4.12,2.89,2.83,5.89-1.22,1.96-17.42,1.96-6.97-1.96-3.81-3.18-1.22-2.12-11.62-2.47,2.79-7.27-.82-.75,4.26-4.59,.37-.37-5.36-3.93-1.18-2.69,3.08v-7.66l-4.61,3.42-6.85-1.16-2.18,4.54-14.12,7.66v3.93h-3.1v-6.91l-8.01-3.81,.73-6.93-7.21-5.32v-6.62l-5.4-1.16,.37-6.15-4.18-.22,.37-4.12h-7.62l-1.16,3.93-2.32-5.58Z" data-name="dep 22" id="dpt_22" title="22 - Côte Armor" />
</a>
<a class="#" href="{{$ile_et_villaine}}" title="Ile et Villaine">
<path class="cls-1" d="M439.65,268.55l-3.57,4.08,2.12,11.61,3.18,1.22,1.96,3.81-1.96,6.97-1.96,17.42-5.89,1.22-2.93-2.83-2.81,4.12-5.38,1.96-4.12,8.82-2.42,3.14,.92,4.12-1.59,6.3-2.91,2.51v2.57l1.96,.61h5.44l4.67,2.97,3.18,5.69-2.85,3.71,.98,3.77h4.08l.31,3.79-3.16,3.79-3.44,1.61,2.2,1.28,.61,1.96-3.55,2.81,4.05,7.62,7.72-4.12,23.72-1.16,1.53-4.24,3.93-3.79,8.38-1.16,.37-4.24,5.73,.81,3.44,4.59,7.72,1.96,1.47-3.06,1.96-6.91,4.95-12.27,2.71-1.53,6.48,.79v-10.35l-2.73-2.77v-11.11l-1.16-3.81v-6.11l3.93-3.93v-7.66l-1.96-1.53,.35-10.74-3.06-1.53h-4.67l-3.93-3.04-4.16,5.03-3.44,.43-2.98,4.2-3.08-.75-6.54-5.77-2.28-7.21-1.16-4.81h-18.81l-6.87-4.24,4.61-6.15-9.31-.47Z" data-name="dep 35" id="dpt_35" title="35 - Ile et Villaine" />
</a>
I understand this might have to do with redefinig the SVG viewBox, but have no idea how I should adapt either SVG definitions to make both paths fit the same responsive section / container... Many thanks for your help