{% require_css %}
<style>
  {% scope_css %}

  /* basic helpers */
  li.nostyle { list-style-type: none; }
  .text-green { color:#05DCAA; }

  .number-cards-container .heading-with-border {
    width: %;
  }
  .number-cards-container.align-right { align-items: flex-start; }
  .number-cards-container.align-center { align-items: center; }

  .number-cards-container { flex-direction: column; }
  .number-card__container {}

  /* decorative pieces you already had */
  .number-cards-container .small-eclipse { left:-239px; top:-200px; }
  .number-cards-container .overview-image-glow::before {
    left: unset; top:-230px; right:-345px; transform: unset;
  }

  /* container width with no side padding */
  .number-cards-container-inner { max-width:1250px; margin:0 auto; }

  /* ROW as grid: no left/right padding, spacing only between cards */
  .number-cards-container-inner ol{
    display:grid !important;                         /* override any flex utility */
    grid-template-columns: repeat(3, minmax(0,1fr)); /* 3 columns on desktop */
    gap:40px;                                        /* space between cards */
    margin:0;
    padding:0;                                       /* no side padding */
    counter-reset: li;
  }

  /* Items: neutralize old flex widths */
  .number-cards-container-inner ol > li{
    position:relative;
    list-style:none;
    margin:0;
    flex: initial !important;
    max-width: none !important;
  }

  /* decorative markers (kept) */
  .number-cards-container-inner ol > li:after{
    left:50%; position:absolute; top:-40px; width:65px;
  }
  .number-cards-container-inner ol > li:before{
    content:counter(li);
    content-visibility:hidden;
    counter-increment:li;
    font-family: Montserrat, sans-serif;
    font-size:32px;
    left:50%; position:absolute; top:-20px; transform:translateX(-50%);
    font-weight:700; transition:all ease-in 0.3s;
    width:50px; height:50px; text-align:center; border-radius:50%;
    color:#0b2036; border:2px solid #05DCAA; background:#05DCAA;
    aspect-ratio:1; visibility:hidden;
  }

  /* card box */
  .number-cards-container-inner ol > li div{
    text-align:center;
    padding:25px;
    border:2px solid #054B80;
    border-radius:5px;
    height:100%;
    transition:all ease-in 0.3s;
    margin:0; /* spacing handled by gap */
  }

  /* hovers */
  .number-cards-container-inner ol > li:hover{ transition: transform 0.3s ease; }
  .number-cards-container-inner ol > li:hover div{ border:1px solid #FFFFFF; transition:all ease-out 0.3s; }
  .number-cards-container-inner ol > li:hover:before{
    text-align:center; border-radius:50%; color:#FFFFFF;
    border:2px solid #00A8DF; background:#00A8DF; z-index:1; transition:all ease-out 0.3s;
  }

  /* prevent per-letter wrapping */
  .number-cards-container-inner ol,
  .number-cards-container-inner ol *{
    word-break: normal;
    overflow-wrap: normal;
  }

  /* responsive columns */
  @media (max-width:1100px){
    .number-cards-container-inner ol{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  }
  @media (max-width:640px){
    .number-cards-container-inner ol{ grid-template-columns: 1fr; }
  }

  {% end_scope_css %}
</style>
{% end_require_css %}

/* space between "Key Capabilities" title and the boxes */
.number-cards-container .heading-with-border {
  margin-bottom: 40px;   /* tweak to taste */
}

/* optional: a bit tighter on small screens */
@media (max-width: 640px){
  .number-cards-container .heading-with-border {
    margin-bottom: 24px;
  }
}