.tre {
  width: 100%;
}

.tre-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
  flex-wrap: nowrap;
}

.tre-row--fx {
  justify-content: center;
  margin-bottom: 16px;
}

.tre-item img {
  display: block;
  height: auto;
  max-width: 100%;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

.tre-item--mixer img {
  transform: translateY(6px); /* sutil para que calce con los decks */
}

@media (max-width: 768px) {
  .tre-row {
    gap: 10px;
  }
  .tre-item img {
    width: 200px; /* será sobrescrito por control responsive si se define */
  }
}