.lobby-banner { --gradient-color: #80462d; --gradient-color-2: #ffea81; position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 16px; aspect-ratio: 2 / 1; }
.lobby-banner--vip { border: 2px solid rgba(0, 0, 0, 0); background: linear-gradient(var(--color-background-page), var(--color-background-page)) padding-box,linear-gradient(260.92deg, var(--gradient-color) 15.61%, var(--gradient-color-2) 73.28%, var(--gradient-color) 94.48%) border-box; }
.lobby-banner--vip .lobby-banner__text > * { background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat: ; background-attachment: ; background-origin: ; background-color: ; background-clip: text; -webkit-text-fill-color: rgba(0, 0, 0, 0); }
.lobby-banner__image { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
.lobby-banner__content { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 12px; height: 100%; position: relative; z-index: 1; }
.lobby-banner__text { max-width: 50%; color: var(--color-banner-text); }
.lobby-banner__text > * { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mobile .lobby-banner__text > :nth-child(2) { -webkit-line-clamp: 1; }
.mobile .lobby-banners { padding: 0px; }
.desktop .lobby-banners__banner { padding: 0px 4px; }
.lobby-banners .m-slider__scroll-box { --scroll-padding: var(--section-padding-l); scroll-padding: var(--scroll-padding); padding: 0 var(--scroll-padding); gap: calc(var(--scroll-padding)/2); }
.desktop .lobby-banners .m-slider__scroll-box { --scroll-padding: 0; }