/* ========================================= 
   MARTISLOVE 
   USP / TRUST FLOW 
   ========================================= */ 
 
.ml-trust-line { 
  width: 100%; 
  height: 190px; 
 
  display: flex; 
  align-items: center; 
 
  background: #0b0b0b; 
  color: #ffffff; 
 
  overflow: hidden; 
 
  box-sizing: border-box; 
} 
 
 
/* ========================================= 
   VIEWPORT 
   ========================================= */ 
 
.ml-trust-line__viewport { 
  width: 100%; 
  overflow: hidden; 
 
  /* 
    Мягкое появление и исчезновение 
    по краям секции. 
  */ 
 
  -webkit-mask-image: linear-gradient( 
    to right, 
    transparent 0%, 
    #000 4%, 
    #000 96%, 
    transparent 100% 
  ); 
 
  mask-image: linear-gradient( 
    to right, 
    transparent 0%, 
    #000 4%, 
    #000 96%, 
    transparent 100% 
  ); 
} 
 
 
/* ========================================= 
   НЕПРЕРЫВНАЯ ЛЕНТА 
   ========================================= */ 
 
.ml-trust-line__track { 
  display: flex; 
  align-items: stretch; 
 
  width: max-content; 
 
  /* 
    Никаких hover. 
    Никаких остановок. 
    Никаких ускорений. 
 
    Постоянное равномерное движение. 
  */ 
 
  animation: mlTrustFlow 82s linear infinite; 
 
  will-change: transform; 
 
  transform: translate3d(0, 0, 0); 
 
  backface-visibility: hidden; 
  -webkit-backface-visibility: hidden; 
} 
 
 
/* ========================================= 
   ГРУППЫ 
   ========================================= */ 
 
.ml-trust-line__group { 
  display: flex; 
  align-items: stretch; 
 
  flex-shrink: 0; 
} 
 
 
/* ========================================= 
   ОДИН ЭЛЕМЕНТ 
   ========================================= */ 
 
.ml-trust-line__item { 
  position: relative; 
 
  width: 260px; 
  min-width: 260px; 
 
  height: 118px; 
 
  padding: 0 36px; 
 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
 
  flex-shrink: 0; 
 
  box-sizing: border-box; 
} 
 
 
/* ========================================= 
   ВЕРТИКАЛЬНЫЙ РАЗДЕЛИТЕЛЬ 
   ========================================= */ 
 
.ml-trust-line__item::after { 
  content: ""; 
 
  position: absolute; 
 
  right: 0; 
  top: 18px; 
  bottom: 18px; 
 
  width: 1px; 
 
  background: rgba(255, 255, 255, 0.14); 
} 
 
 
/* ========================================= 
   БОЛЬШОЕ ЗНАЧЕНИЕ 
   ========================================= */ 
 
.ml-trust-line__value { 
  margin: 0 0 10px; 
 
  font-family: inherit; 
 
  font-size: 42px; 
  line-height: 0.95; 
 
  font-weight: 400; 
 
  letter-spacing: -0.045em; 
 
  white-space: nowrap; 
 
  color: #ffffff; 
} 
 
 
/* ========================================= 
   СЛОВА ВМЕСТО ЦИФР 
   ========================================= */ 
 
.ml-trust-line__value--word { 
  font-size: 27px; 
  line-height: 1; 
 
  font-weight: 500; 
 
  letter-spacing: 0.015em; 
} 
 
 
/* Более длинное слово "ПОДДЕРЖКА" */ 
 
.ml-trust-line__item:last-child 
.ml-trust-line__value--word { 
  font-size: 24px; 
} 
 
 
/* ========================================= 
   ЦЕНА 
   ========================================= */ 
 
.ml-trust-line__value--price { 
  font-size: 36px; 
} 
 
 
/* ========================================= 
   ОСНОВНАЯ ПОДПИСЬ 
   ========================================= */ 
 
.ml-trust-line__title { 
  font-family: inherit; 
 
  font-size: 13px; 
  line-height: 1.25; 
 
  font-weight: 600; 
 
  letter-spacing: 0.01em; 
 
  color: #ffffff; 
} 
 
 
/* ========================================= 
   ВТОРИЧНАЯ ПОДПИСЬ 
   ========================================= */ 
 
.ml-trust-line__text { 
  margin-top: 4px; 
 
  max-width: 195px; 
 
  font-family: inherit; 
 
  font-size: 11px; 
  line-height: 1.35; 
 
  font-weight: 400; 
 
  color: rgba(255, 255, 255, 0.52); 
} 
 
 
/* ========================================= 
   АНИМАЦИЯ 
   ========================================= */ 
 
@keyframes mlTrustFlow { 
 
  from { 
    transform: translate3d(0, 0, 0); 
  } 
 
  to { 
    transform: translate3d(-50%, 0, 0); 
  } 
 
} 
 
 
/* ========================================= 
   ПЛАНШЕТ 
   ========================================= */ 
 
@media (max-width: 1024px) { 
 
  .ml-trust-line { 
    height: 175px; 
  } 
 
 
  .ml-trust-line__track { 
    animation-duration: 78s; 
  } 
 
 
  .ml-trust-line__item { 
    width: 235px; 
    min-width: 235px; 
 
    height: 108px; 
 
    padding: 0 30px; 
  } 
 
 
  .ml-trust-line__value { 
    font-size: 37px; 
  } 
 
 
  .ml-trust-line__value--word { 
    font-size: 24px; 
  } 
 
 
  .ml-trust-line__value--price { 
    font-size: 32px; 
  } 
 
 
  .ml-trust-line__title { 
    font-size: 12px; 
  } 
 
 
  .ml-trust-line__text { 
    max-width: 175px; 
 
    font-size: 10px; 
  } 
 
} 
 
 
/* ========================================= 
   МОБИЛЬНЫЙ 
   ========================================= */ 
 
@media (max-width: 640px) { 
 
  .ml-trust-line { 
    height: 155px; 
  } 
 
 
  .ml-trust-line__viewport { 
    -webkit-mask-image: linear-gradient( 
      to right, 
      transparent 0%, 
      #000 6%, 
      #000 94%, 
      transparent 100% 
    ); 
 
    mask-image: linear-gradient( 
      to right, 
      transparent 0%, 
      #000 6%, 
      #000 94%, 
      transparent 100% 
    ); 
  } 
 
 
  .ml-trust-line__track { 
    animation-duration: 70s; 
  } 
 
 
  .ml-trust-line__item { 
    width: 205px; 
    min-width: 205px; 
 
    height: 96px; 
 
    padding: 0 24px; 
  } 
 
 
  .ml-trust-line__item::after { 
    top: 14px; 
    bottom: 14px; 
  } 
 
 
  .ml-trust-line__value { 
    margin-bottom: 8px; 
 
    font-size: 33px; 
  } 
 
 
  .ml-trust-line__value--word { 
    font-size: 21px; 
  } 
 
 
  .ml-trust-line__value--price { 
    font-size: 28px; 
  } 
 
 
  .ml-trust-line__title { 
    font-size: 12px; 
  } 
 
 
  .ml-trust-line__text { 
    max-width: 155px; 
 
    font-size: 10px; 
    line-height: 1.3; 
  } 
 
} 
 
 
/* ========================================= 
   МАЛЕНЬКИЕ ТЕЛЕФОНЫ 
   ========================================= */ 
 
@media (max-width: 360px) { 
 
  .ml-trust-line { 
    height: 150px; 
  } 
 
 
  .ml-trust-line__track { 
    animation-duration: 68s; 
  } 
 
 
  .ml-trust-line__item { 
    width: 190px; 
    min-width: 190px; 
 
    padding: 0 21px; 
  } 
 
 
  .ml-trust-line__value { 
    font-size: 30px; 
  } 
 
 
  .ml-trust-line__value--word { 
    font-size: 19px; 
  } 
 
 
  .ml-trust-line__value--price { 
    font-size: 25px; 
  } 
 
} 
 
 
/* ========================================= 
   REDUCED MOTION 
   ========================================= */ 
 
@media (prefers-reduced-motion: reduce) { 
 
  .ml-trust-line__track { 
    animation: none; 
  } 
 
}