/* ==========================================================================
   BENTO GRID ENGINE (3-COLUMN RESPONSIVE SYSTEM)
   ========================================================================== */

/* 1. Bento Grid Container */
.nx-bento-grid,
.e-con.nx-bento-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  width: 100% !important;
}

/* 2. Span Modifiers (Desktop) */
@media (min-width: 1025px) {
  .nx-bento-span-2,
  .e-con.nx-bento-span-2,
  .e-child.nx-bento-span-2 {
    grid-column: span 2 !important;
  }

  .nx-bento-span-3,
  .e-con.nx-bento-span-3,
  .e-child.nx-bento-span-3 {
    grid-column: span 3 !important;
  }
}

/* 3. Responsive Tablet & Mobile */
@media (max-width: 1024px) {
  .nx-bento-grid,
  .e-con.nx-bento-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .nx-bento-span-2,
  .nx-bento-span-3,
  .e-con.nx-bento-span-2,
  .e-con.nx-bento-span-3 {
    grid-column: span 1 !important;
  }
}