:root { --cols: 2; }  /* global default: 2; parent can override */

.tiles-card-carousel {
  position: relative;
  width: 100%;
  margin-bottom: 1.5rem;
  --gap: 12px;            /* keep gap only */
}

.tiles-card-viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 700px) {
  /* remove the self-ref line here too */
  /* (that grid-auto-columns rule looks leftover; safe to delete) */
}

.tiles-card-track { display:flex; gap: var(--gap, 12px); }

/* square cards sized by --cols */
.tile-card{
  position: relative;
  flex: 0 0 calc((100% - (var(--gap,12px) * (var(--cols,2) - 1))) / var(--cols,2));
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  scroll-snap-align: start;
}
.tile-card::before{ content:""; display:block; padding-top:100%; }
.tile-card-img{ position:absolute; inset:0; }
.tile-card-img img{ width:100%; height:100%; object-fit:cover; display:block; }