flex force wrap alpinejs

by jpeter06

HTML

<script src="//unpkg.com/alpinejs" defer></script>
<script>
document.addEventListener('alpine:init', ()=>{
	Alpine.data('mainData', () => ({
    enlaces: [{lugar:'Peninsula', clase:'peninsula',
    					 botones:[{label:'mímico', svg:'#foto'},
               					{label:'Warm'},
               					{label:'div3', svg:'#mountain' , aspas:true},
               					{label:'div3', svg:'#mountain'},
               					{label:'Cool'},
               					{label:'Foto', svg:'#foto'}
               					]
              },
    					{lugar:'Canarias',clase:'canarias',
    					 botones:[{label:'mímico'},
               					{label:'Warm'},
               					{label:'div3', svg:'#mountain' , aspas:true},
               					{label:'div3'},
               					{label:'Cool'},
               					{label:'Foto', svg:'#foto'}
               					]
              }
             ]
  }))
})
</script>
<div class="hidden">
  <svg>
    <defs>
      <path id="aspaDef" vector-effect="non-scaling-stroke" d="M 0.14812938,-0.32911038 2.8053269,-0.42756998 3.0330811,-1.03977 13.562973,-0.00219185 13.514033,1.1402241 0.47955654,0.78529138 Z" ></path>
       <path id="mountain" vector-effect="non-scalin-stroke" d="M 86.938554,83.179369 C 84.772045,80.910894 76.884285,72.4549 70.00606,72.48973 63.127834,72.524574 50.787797,85.838365 44.814498,85.851776 38.502109,85.865912 33.116606,79.63842 26.813043,79.972478 21.378251,80.260496 16.503651,84.370533 13.25149,87.187981 9.9993314,90.005428 6.837709,94.670727 6.837709,94.670727 l 90.075016,1.1e-5 c 0,0 -7.807662,-9.222891 -9.974171,-11.491369 z"></path>
       <path id="mount1" vector-effect="non-scalin-stroke" d="M 87.548268,83.105047 C 85.328846,80.781179 78.541787,71.780519 70.202306,72.15439 61.862829,72.528264 46.768127,87.659416 40.807364,94.877002 l 56.958622,1.2e-5 c 0,0 -7.998308,-9.4481 -10.217718,-11.771967 z"></path>
       <path id="mount2" vector-effect="non-scalin-stroke" d="m 25.954594,79.819842 c -5.567501,0.295042...

CSS

html, body{
  padding:0px;
  margin:0px;
  width:100%;
  height:100%;
  overflow:auto;
  font-size:min(2.5vw, 2.5vh);
  font-family:sans-serif;
}

body{
 padding:1.5rem;
 box-sizing: border-box;
}

body {
  --neo-bg: #ebecf0;
  --neo-color: #8992a5;
  --neo-bt-bg1: #ffaa77;
  --neo-shadow:#c8c9cc;
  --neo-shadow2:#e0e0e0;
  --neo-light:#FFFFFF;
  --div-size:6rem;
  --pen-color:orange;
  --can-color:#00a7ff;
  background:var(--neo-bg);
  color: var(--neo-color);
  user-select: none;
}

body, .container{
  box-sizing: border-box;
  display:flex;
  flex-wrap: wrap;
  gap:1.5rem;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding:1.5rem;
}
body{
  flex-direction:row;
}

.container {
  width:20rem;
}

.container div{
  flex-grow: 0;
  width:var(--div-size);
  height:var(--div-size);
  display:flex;
  text-align:center;
  justify-content:center;
  align-items: center;
  box-sizing: border-box;
  flex-direction: column;
}
.peninsula{

}
.canarias{

}

.alone{
  background:transparent;
  flex-basis: 100%;
}

.textCenter{
  text-align:center;
}

.hidden{ display:none}

/** ASPAS ANIMATION **/
.animAspas:hover .aspas, .animAspas:hover .aspas2{
   animation-play-state: running;
}
.aspas, .aspas2 {
    animation-duration: 6s;
    animation-direction: normal;
    animation-name: rotAspas;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-play-state: paused;
}

@keyframes rotAspas {
  0% {  transform: rotate(0);}
  100% { transform: rotate(360deg);}
}

/*** NEO **/
.neocont{
  box-shadow:  6px 6px 11px var(--neo-shadow), 
             -5px -5px 11px var(--neo-light);
  border-radius: 10px;
}

.neocab{
  box-shadow: inset 1px 1px 2px var(--neo-shadow), 
            inset -1px -1px 2px var(--neo-light);
  border-radius: 8px;
  padding:16px;
  margin: 0px;
}

.cab{
  font-size:2rem;
  padding:0.9rem;
  margin: 0px;
}
.peninsula .cab { color:var(--pen-color)}
.canarias .cab...