.benefits-grid {
  display: grid;
  gap: 1px;
  background-color: var(--stb-border-gray);
  border: 1px solid var(--stb-border-gray);
}

.benefits-grid.cols-5 {
  grid-template-columns: repeat(6, 1fr);
}

.benefits-grid.cols-5>.benefit {
  grid-column: span 2;
  
}

.benefits-grid.cols-5>.benefit:nth-child(1),
.benefits-grid.cols-5>.benefit:nth-child(2) {
  grid-column: span 3;
}

.benefits-grid.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.benefits-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.benefits-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.benefit {
  background: var(--stb-white);
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
}

.benefit .icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-content: center;
  border-radius: 50%;
}

/* Colores individuales */
.benefit:nth-child(1)>.icon {
  background-color: #DDEBFF;
}

.benefit:nth-child(1)>.icon>svg>path.stroke {
  stroke: #2A7BE4;
}

.benefit:nth-child(1)>.icon>svg>path.fill {
  fill: #2A7BE4;
}

.benefit:nth-child(2)>.icon {
  background-color: #E4F9E6;
}

.benefit:nth-child(2)>.icon>svg>path.fill {
  fill: #3DBF4A;
}

.benefit:nth-child(2)>.icon>svg>path.stroke {
  stroke: #3DBF4A;
}

.benefit:nth-child(3)>.icon {
  background-color: #FFF4CC;
}

.benefit:nth-child(3)>.icon>svg>path.fill {
  fill: #E3B500;
}

.benefit:nth-child(3)>.icon>svg>path.stroke {
  stroke: #E3B500;
}

.benefit:nth-child(4)>.icon {
  background-color: #FBE3E3;
}

.benefit:nth-child(4)>.icon>svg>path.fill {
  fill: #E14C4C;
}

.benefit:nth-child(4)>.icon>svg>path.stroke {
  stroke: #E14C4C;
}

.benefit:nth-child(5)>.icon {
  background-color: #F1E0FA;
}

.benefit:nth-child(5)>.icon>svg>path.fill {
  fill: #9B51E0;
}

.benefit:nth-child(5)>.icon>svg>path.stroke {
  stroke: #9B51E0;
}

.benefit:nth-child(6)>.icon {
  background-color: #E0F3F8;
}

.benefit:nth-child(6)>.icon>svg>path.fill {
  fill: #3AAFD9;
}

.benefit:nth-child(6)>.icon>svg>path.stroke {
  stroke: #3AAFD9;
}

/* Responsive */
@media screen and (max-width: 1024px) {
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media screen and (max-width: 640px) {
  .benefits-grid {
    grid-template-columns: 1fr !important;
  }
}