.ai-portfolio-filters{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  justify-content:center;
}

.ai-portfolio-grid img,
.ai-portfolio-grid .ai-portfolio-thumb{
  width:100%;
  height:auto;
  display:block;
}

/* ================================
   AI Portfolio - Isotope smooth filter (Bootstrap-like sizing)
   Fixes tiny/off-center thumbs on mobile
   ================================ */

.ai-portfolio .section-title-portfolio,
.ai-portfolio .ai-portfolio-filters{
  justify-content: center;
}

.ai-iso-grid{
  position: relative; /* required for Isotope absolute positioning */
}

/* When Isotope is active, Bootstrap .row/.col sizing no longer applies.
   Force widths per breakpoint to match: col-12, col-sm-6, col-lg-3 */
.ai-iso-grid.ai-isotope-active .ai-portfolio-item{
  width: 100%;
  padding: .75rem;
  box-sizing: border-box;
}

@media (min-width: 576px){
  .ai-iso-grid.ai-isotope-active .ai-portfolio-item{ width: 50%; }
}
@media (min-width: 992px){
  .ai-iso-grid.ai-isotope-active .ai-portfolio-item{ width: 25%; }
}

/* Create gutters similar to Bootstrap g-3 */
.ai-iso-grid.ai-isotope-active{
  margin: -.75rem;
}

/* Ensure images fill their item box */
.ai-iso-grid .ai-portfolio-item img{
  width: 100%;
  height: auto;
  display: block;
}