/* GRID - 100% EXACTE KOPIE VAN SLIDER CSS */
.dc-tt-grid{
  --gap: 16px;
  --per-view: 4;
  --img-h: 64px;  /* EXACT ZOALS SLIDER */
  --item-w: calc((100% - (var(--gap) * (var(--per-view) - 1))) / var(--per-view));

  display:flex !important;
  flex-wrap:wrap !important;
  gap:var(--gap);
  width:100% !important;
  max-width:100% !important;
  align-items:stretch;
}

/* Responsive breakpoints - EXACT ZOALS SLIDER */
@media (max-width: 479px) {
  .dc-tt-grid { --per-view: 2; --img-h: 52px; }
}
@media (min-width: 480px) and (max-width: 767px) {
  .dc-tt-grid { --per-view: 3; --img-h: 56px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .dc-tt-grid { --per-view: 4; --img-h: 64px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .dc-tt-grid { --per-view: 6; --img-h: 72px; }
}
@media (min-width: 1280px) {
  .dc-tt-grid { 
    --per-view: var(--dc-cols, 8); 
    --img-h: 76px; 
  }
}

/* Grid item - EXACT ZOALS SLIDER .dclx-slide */
.dc-tt-grid-item{
  display:flex;
  flex:0 0 var(--item-w) !important;
  width:var(--item-w) !important;
  max-width:var(--item-w) !important;
  box-sizing:border-box;
  border:1px solid #eee !important;
  border-radius:12px !important;
  padding:8px 12px !important;  /* EXACT ZOALS SLIDER */
  background:#fff !important;
  transition:box-shadow .15s ease, transform .15s ease;
  min-width:0;
}

.dc-tt-grid-item:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}

.dc-tt-grid-link{
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%;
  text-decoration:none;
  color:inherit;
  align-items:center;
  justify-content:center;
}

/* Media container - EXACT ZOALS SLIDER .dclx-thumb */
.dc-tt-grid-media{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:calc(var(--img-h) + 8px);  /* EXACT ZOALS SLIDER */
}

/* Image - EXACT ZOALS SLIDER */
.dc-tt-grid-img{
  width:100% !important;
  height:var(--img-h) !important;
  max-width:100% !important;
  object-fit:contain;
  display:block;
  margin:0 auto;
}

.dc-tt-grid-meta{
  padding:4px 8px;
  text-align:center;
  width:100%;
}

.dc-tt-grid-name{
  font-weight:600;
  line-height:1.2;
}

.dc-tt-grid-count{
  opacity:.7;
  font-size:12px;
  margin-top:4px;
}

/* single thumb */
.dc-tt-thumb-single .dc-tt-thumb-link{
  display:inline-block;
  text-decoration:none;
  color:inherit;
}
.dc-tt-thumb-img{display:block;}