/* Ссылка на примеры перевода фото с /photo-translate/ (владелец 22.10.2026):
   рядом с подписью маленькие «до» и «после» одного снимка, вся строка ведёт на
   /photo-translate/examples/. Отдельным файлом, чтобы не поднимать ?v= у lp.css
   на всех посадочных ради одной страницы. */
.lp-ex-teaser {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
  padding: 10px 18px 10px 10px;
  border-radius: var(--lp-radius, 16px);
  border: 1px solid var(--lp-border, rgba(255, 255, 255, 0.1));
  background: var(--lp-card, rgba(17, 26, 40, 0.72));
  color: var(--lp-accent, #d4f54a);
  text-decoration: none;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  transition: border-color 0.2s ease, transform 0.16s ease;
}
.lp-ex-teaser:hover,
.lp-ex-teaser:focus-visible {
  border-color: var(--lp-accent, #d4f54a);
  transform: translateY(-1px);
}
.lp-ex-pair {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.lp-ex-shot {
  position: relative;
  display: block;
  width: 76px;
  height: 86px;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.lp-ex-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lp-ex-shot b {
  position: absolute;
  /* Сверху: внизу таблички стоит сам перевод, его метка закрывать не должна. */
  left: 4px;
  top: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(7, 11, 18, 0.78);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}
.lp-ex-shot.is-after b {
  background: var(--lp-accent, #d4f54a);
  color: var(--lp-on-accent, #11140a);
}
.lp-ex-arrow {
  color: var(--lp-text-muted, rgba(255, 255, 255, 0.5));
  font-size: 16px;
}
.lp-ex-text {
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 520px) {
  .lp-ex-teaser {
    gap: 12px;
    font-size: 15.5px;
  }
  .lp-ex-shot {
    width: 62px;
    height: 70px;
  }
}