/* Баннер закрытого архива (09–12.10) — блок T123 на главной.
   Лайн-ап образов: центральный крупный, остальные мелкие и бледные позади.
   До 960px — телефонная раскладка (подпись под образом), шире — подпись слева от образа. */
@import url("https://fonts.googleapis.com/css2?family=Onest:wght@400;500;700&display=swap");

.ufab { --ufab-ink: #17090B; --ufab-muted: #8a817b; --ufab-burgundy: #7A1F2A; --ufab-burgundy-deep: #5e1621;
  position: relative; background: #fff; color: var(--ufab-ink); overflow: hidden; font-family: "Onest", Arial, sans-serif;
  height: 650px; box-sizing: border-box; -webkit-user-select: none; user-select: none; }
.ufab *, .ufab *::before, .ufab *::after { box-sizing: border-box; }
.ufab__head { position: absolute; left: 16px; right: 16px; top: 22px; display: grid; gap: 6px; text-align: center; }
.ufab__kicker { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ufab-ink); }
.ufab__sub { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ufab-muted); }
.ufab__stage { position: absolute; left: 0; right: 0; top: 96px; height: 366px; }
.ufab__fig { position: absolute; bottom: 0; left: 0; height: 100%; transform-origin: 50% 50%;
  transition: transform .9s cubic-bezier(.65,0,.35,1), opacity .9s, filter .9s; will-change: transform, opacity; }
.ufab__fig img { display: block; height: 100%; width: auto; margin: 0; }
.ufab__arrow { position: absolute; top: 260px; z-index: 30; width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; background: none; cursor: pointer; color: var(--ufab-muted); font: 18px "Onest", Arial, sans-serif; padding: 0; }
.ufab__arrow:hover { color: var(--ufab-ink); }
.ufab__arrow--l { left: 6px; } .ufab__arrow--r { right: 6px; }
.ufab__info { position: absolute; left: 20px; right: 20px; top: 478px; z-index: 20; display: grid; gap: 10px; justify-items: center; text-align: center; transition: opacity .35s; }
.ufab__lbl { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ufab-muted); }
.ufab__piece { display: grid; gap: 2px; }
.ufab__nm { font-size: 12px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; line-height: 1.3; }
.ufab__pr { font-size: 12px; line-height: 1.3; color: #3c3532; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ufab__pr s { color: #a39a93; margin-right: 6px; }
.ufab__pr b { font-weight: 500; color: var(--ufab-burgundy); }
.ufab__foot { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 20; display: grid; gap: 10px; justify-items: stretch; text-align: center; }
.ufab__btn { display: inline-block; text-decoration: none !important; font-weight: 700; font-size: 12px; letter-spacing: .07em; text-transform: uppercase;
  padding: 18px 30px; border-radius: 4px; background: var(--ufab-burgundy); color: #FAFAFA !important; text-align: center; }
.ufab__btn:hover { background: var(--ufab-burgundy-deep); }
.ufab__btn:focus-visible { outline: 2px solid var(--ufab-burgundy); outline-offset: 3px; }

@media (min-width: 960px) {
  .ufab { height: 690px; }
  .ufab__head { top: 34px; }
  .ufab__stage { top: 100px; height: 460px; }
  .ufab__arrow { top: 315px; }
  .ufab__arrow--l { left: calc(50% - 170px); } .ufab__arrow--r { right: calc(50% - 170px); }
  .ufab__info { left: calc(50% - 310px); right: auto; top: 200px; width: 240px; justify-items: start; text-align: left; }
  .ufab__foot { left: 0; right: 0; bottom: 32px; justify-items: center; }
}
@media (prefers-reduced-motion: reduce) { .ufab__fig { transition: none; } }