@import url("../design-tokens.css");

/* ==========================================================
   Блок "Марки авто"
   ========================================================== */

.car-brands {
  position: relative;
  overflow: hidden;
  color: var(--color-white);
 
}



.car-brands::before {
  top: 128px;
}

.car-brands::after {
  top: 322px;
  right: -5%;
}

.car-brands__container {
  width: min(100% - 48px, 1500px);
  margin: 0 auto;
}

.car-brands__content {
  position: relative;
  z-index: 1;
}

.services-page__content .car-brands__head {
  display: block;
  max-width: 920px;
}
.services-page__content .section-head__line{
  display: none;
}
.services-page__content  .section-head__title {

}

.car-brands__title-line {
display: none;
}

.services-page__content .car-brands__grid {
margin-top: 0;
}

.car-brands__panel {
  position: relative;
}

.car-brands__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px 22px;
}

.car-brands__item {
  display: flex;
  align-items: center;
  min-height: 80px;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)),
    rgba(4, 7, 8, 0.84);
  box-shadow:
    inset 0 1px 0 var(--color-border-subtle),
    0 12px 28px rgba(0, 0, 0, 0.28);
}

.car-brands__logo-wrap {
  display: flex;
  flex: 0 0 50px;
  align-items: center;
  justify-content: flex-start;
  /* width: 50px; */
  /* min-width: 50px; */
  justify-content: flex-start;
  width: 100%;
}
.services-page .car-brands__logo-wrap{
  flex: 0 0 auto;
  width: 100%;
}
.services-page .car-brands__logo{

  width: 100%;
  
  object-fit: contain;
}
.car-brands__logo {
  display: block;
  /* max-width: 50px; */
  
  max-height: 50px;
  object-fit: contain;
  filter: grayscale(1) brightness(0) invert(1);
  opacity: 0.96;
}

.car-brands__logo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-round);
  color: var(--color-white);
  font-size: var(--font-size-2xl);
  font-weight: 700;
  line-height: 1;
}

.car-brands__name {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(14px, 1.55vw, 16px);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.035em;
  margin-left: var(--space-2-5);
  display: none;
}
.home .car-brands__name{
  display: block;
}


@media (max-width: var(--container-content)) {
  .car-brands__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {


  .car-brands__container {
    width: min(100% - 28px, 1500px);
  }
  
  .car-brands__title {
    display: block;
    margin-bottom: var(--space-4-5);
    font-size: 36px;
  }

  .car-brands__title-line {
    display: block;
    width: 74px;
    margin-top: var(--space-4);
  }

  .car-brands__subtitle {
    font-size: 17px;
  }



  .car-brands__grid {
    gap: var(--space-3);
  }

  .car-brands__item {
    min-height: 82px;
    padding: 16px 20px;
    border-radius: 15px;
  }

.car-brands__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .car-brands__logo {
    /* max-width: 54px; */
    /* max-height: 44px; */
  }

  .car-brands__name {
    font-size: var(--font-size-lg);
  }
}
@media (max-width: 526px) {
.car-brands__item{
  flex-direction: column;

}
.car-brands__name{
  margin: 10px 0 0;
} 
.car-brands__logo-wrap{

  justify-content: center;
}

}