.inno-list ul>li {
  display: flex;
  flex-flow: row nowrap;
  padding-left: 0;
  gap: 0;
}

.shape-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
  max-width: min(15vw, 100px);
  align-items: center;
  position: relative;    
  left: -1em;
  top: 1rem;
  margin-right: 7%;
  transform-origin: top left;
  flex-shrink: 2;
  flex-basis: 10vw;
}

@media(max-width: 781px) {
  .shape-container {
    margin-left: 2em;
  }
}

.inno-list .entry-content {
    flex-basis: 90vw;
}

.shape-row {
    display: flex;
    gap: 10px;
}

/* Shape styles (your existing or adjust accordingly) */

/* Circle */
.shape.circle {
    border-radius: 50%;
    width: 13vw;
    height: 13vw;
    max-width: 100px;
    max-height: 100px;
    min-width: 70px;
    min-height: 70px;
}

/* Diamond */
.shape.diamond {
  width: 11vw;               
  height: 11vw;              
  max-width: 91px;          
  max-height: 91px;
  min-width: 56px;
  min-height: 56px;

    background: inherit;
    transform: rotate(45deg);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.shape.diamond .shape-number {
    transform: rotate(-45deg); /* reverse rotation for the number to be horizontal */
}

/* Triangle - half square shape */
/* Using CSS clip-path to create a triangle */
.shape.triangle {
    clip-path: polygon(0 0, 0% 100%, 100% 100%);
    rotate: -45deg;    
    width: 13vw;
    height: 13vw;
    max-width: 100px;
    max-height: 100px;
    min-width: 70px;
    min-height: 70px;

    background: inherit; /* background-color set by JS */
    rotate: 90deg;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    top: -18px;
    z-index: -1;    
}

/* Number inside shapes */
.shape-number {
    color: #f9f9f9;
    font-weight: bold;
    font-size: clamp(56px, 10vw, 81px);
    position: absolute; 
    top: clamp(21px, 3.66vw, 33px);
    left: 50%;
    transform-origin: center;
    transform: translateX(-50%) rotate(-90deg);
    pointer-events: none;
    user-select: none;
    font-family: var(--wp--preset--font-family--jost);
    z-index: 1;
    display: block;
    width: 10em;
    height: auto;
    text-align: center;
}



.smaller .shape-container {
  scale: 0.7;
  top: 0.9rem;
}

.shape-container::after {
    content: '';
    position: absolute;
    top: .33em;
    right: -1.66em;
    height: 66%;       /* 66% of the parent's height */
    border-right: 2px solid var(--wp--preset--color--contrast);
    pointer-events: none;
}

.smaller .shape-container{
    margin-right: 0;
}
.smaller .shape-container::after {
       border-width: 3px;
       top: -.33em;
}

@media (max-width: 767px){
  .shape-container{
    margin-right: 2rem;
  }
}

.no-shapes .shape-container {
  display: none !important;
}