.container { min-width: var(--card-width); max-width: var(--card-width); height: calc(var(--card-height) + 26px); display: flex; flex-direction: column; gap: var(--s-1); --tournament-card-icon-size: 13px; } .containerTall { height: 100%; } .card { background-color: var(--bg-lightest); border-radius: var(--rounded); color: var(--text); padding: var(--s-1) var(--s-2) var(--s-2) var(--s-2); height: 100%; min-width: var(--card-width); max-width: var(--card-width); } .imgContainer { background-color: var(--bg); padding: var(--s-1-5); border-radius: 100%; margin-left: -10px; margin-top: -10px; } .avatarImg { border-radius: 100%; } .card:hover .avatarImg { outline: 6px solid var(--theme-transparent); } .org { display: flex; gap: var(--s-1); font-size: var(--fonts-xxs); color: var(--text-lighter); } .org span { max-width: 165px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .time { font-size: var(--fonts-xs); font-weight: var(--semi-bold); color: var(--text-lighter); display: block; text-align: center; } .nameRow { display: flex; justify-content: center; align-items: center; gap: var(--s-2); } .name { font-weight: var(--semi-bold); font-size: var(--fonts-sm); white-space: nowrap; text-overflow: ellipsis; max-width: 225px; overflow: hidden; } .nameWithTier { max-width: 165px; } .teamCount { font-size: var(--fonts-xxs); font-weight: var(--bold); background-color: var(--bg-lightest); border-radius: var(--rounded-sm); width: max-content; padding: var(--s-0-5) var(--s-1-5); display: flex; gap: var(--s-1); } .teamCount svg { width: var(--tournament-card-icon-size); } .modesPillContainer { padding-inline-start: 12px; } .modesPill { background-color: var(--bg-lightest); border-radius: var(--rounded-sm); width: max-content; padding: var(--s-0-5) var(--s-1-5); display: flex; gap: var(--s-1); } .pillsContainer { display: flex; gap: var(--s-1); justify-content: end; padding-inline-end: 12px; width: 100%; } .pillsContainer.lonely { padding-inline-end: 0px; padding-inline-start: 12px; } .pill { font-size: var(--fonts-xxs); font-weight: var(--bold); border-radius: var(--rounded-sm); padding: var(--s-0-5) var(--s-1-5); display: grid; place-items: center; } .pillRanked { background-color: var(--theme-info-transparent); color: var(--theme-info); } .pillRanked svg { width: var(--tournament-card-icon-size); } .firstPlacers { margin-inline: auto; margin-top: var(--s-5); width: max-content; } .firstPlacersTeamName { max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .badgesContainer { display: flex; gap: var(--s-1); justify-content: center; background-color: black; border-radius: var(--rounded-sm); padding: var(--s-1); } .badgeNavIcon { min-width: 16px; } .badgeDisplay { min-width: initial; min-height: initial; } .badgePill { background-color: var(--bg-lightest); border-radius: var(--rounded-sm); padding: var(--s-0-5) var(--s-1-5); }