@layer ui{
.crawl{position:relative;border-block:1px solid #ffffff22;background:#0b0907;overflow:hidden;padding-block:1.1rem;mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.track{display:flex;gap:1rem;width:max-content;animation:crawl 70s linear infinite}
.crawl:hover .track{animation-play-state:paused}
.crawl.rev .track{animation-direction:reverse;animation-duration:90s}
.ph{position:relative;display:block;flex:none;width:clamp(11rem,22vw,17rem);aspect-ratio:3/2;border-radius:1rem;overflow:hidden;text-decoration:none;transition:scale .3s,rotate .3s}
.ph:nth-child(odd){rotate:-1.2deg}.ph:nth-child(even){rotate:1.2deg}
.ph:hover{scale:1.06;rotate:0deg;z-index:2}
.ph img{width:100%;height:100%;object-fit:cover}
.ph span{position:absolute;inset:auto .5rem .5rem .5rem;font:500 .62rem var(--m);text-transform:uppercase;letter-spacing:.04em;background:var(--k);color:#fff;padding:.3rem .55rem;border-radius:99px;width:max-content;max-width:95%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph span b{color:var(--o)}
.news{flex:none;display:flex;align-items:center;gap:.6rem;text-decoration:none;font:800 clamp(1.6rem,3vw,2.6rem) var(--d);letter-spacing:-.04em;white-space:nowrap;padding-inline:1rem}
.news:hover{color:var(--o)}.news .res{font-size:1rem}.news i{font:400 1em var(--s);color:var(--o)}
.dot{color:var(--o);font-size:1.5rem;align-self:center}
}
