/* ===== BrandItem — single logo tile inside the Brands "Markalarımız" strip =====
 * Self-sizing flex item: 2-per-row on small mobile, 3-per-row at 640px,
 * auto/equal width on tablet+. Grayscale-at-rest treatment is driven by the
 * parent Brands row modifier (see Brands/styles.css). */

.cc_4vBO1nbhag_2DIrzruPTQ .kombos-brand-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 2-per-row on small mobile with gap factored in */
  flex: 0 1 calc(50% - 0.75rem);
  max-width: 9rem;
  min-height: 3rem;
}

.cc_4vBO1nbhag_2DIrzruPTQ .kombos-brand-item__logo {
  display: block;
  width: 100%;
  max-height: 2.5rem;
  object-fit: contain;
  transition:
    filter var(--kombos-duration-base) var(--kombos-ease),
    opacity var(--kombos-duration-base) var(--kombos-ease);
}

/* Text fallback when a brand has no logo image */
.cc_4vBO1nbhag_2DIrzruPTQ .kombos-brand-item__name {
  color: var(--kombos-gray-700);
  white-space: nowrap;
  text-align: center;
}

/* Small — 3-per-row */
@media (min-width: 640px) {
  .cc_4vBO1nbhag_2DIrzruPTQ .kombos-brand-item {
    flex: 0 1 calc(33.333% - 1.333rem);
    max-width: 10rem;
  }

  .cc_4vBO1nbhag_2DIrzruPTQ .kombos-brand-item__logo {
    max-height: 2.75rem;
  }
}

/* Tablet — natural width */
@media (min-width: 768px) {
  .cc_4vBO1nbhag_2DIrzruPTQ .kombos-brand-item {
    flex: 0 1 auto;
    max-width: 10rem;
  }
}

/* Desktop — equal-width cells in a single row */
@media (min-width: 1024px) {
  .cc_4vBO1nbhag_2DIrzruPTQ .kombos-brand-item {
    flex: 1 1 0;
    max-width: 10rem;
  }

  .cc_4vBO1nbhag_2DIrzruPTQ .kombos-brand-item__logo {
    max-height: 3rem;
  }
}