@keyframes fade-in{0%{opacity:0}to{opacity:1}}.head-to-head-card{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-gap:.5rem;gap:.5rem;width:100%}@media(min-width:768px){.head-to-head-card{gap:.75rem}}.head-to-head-card__divider{width:1px;height:100%;background-color:#e6e7e9}@media(prefers-color-scheme:dark){.head-to-head-card__divider{background-color:#3a3c3e}}.side-participant{width:100%;min-width:0}.side-participant,.side-participant__header{display:flex;flex-direction:column;gap:.5rem}.side-participant__header{justify-content:space-between;align-items:flex-start}@media(min-width:768px){.side-participant__header{flex-direction:row}}.side-participant__header--opponent{flex-direction:column;align-items:flex-end}@media(min-width:768px){.side-participant__header--opponent{flex-direction:row-reverse}}.side-participant__info{display:flex;align-items:center;gap:.5rem;width:100%}.side-participant__info--opponent{flex-direction:row-reverse}.side-participant__avatar{min-width:1.5rem}@media(min-width:768px){.side-participant__avatar{min-width:auto}}.side-participant__details{flex:1 1;display:flex;flex-direction:column;overflow:hidden}.side-participant__title{display:flex;align-items:center;gap:.5rem}.side-participant__title--opponent{flex-direction:row-reverse}.side-participant__team-name{color:#012837;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1rem}@media(min-width:768px){.side-participant__team-name{font-size:1rem;line-height:1.25rem}}@media(prefers-color-scheme:dark){.side-participant__team-name{color:#fff}}.side-participant__record{font-size:.75rem;line-height:.875rem;color:#5e5e5f}@media(min-width:768px){.side-participant__record{font-size:.875rem;line-height:1rem}}@media(prefers-color-scheme:dark){.side-participant__record{color:#767777}}.side-participant__record--opponent{text-align:right}.side-participant__points{display:flex;flex-direction:column;align-items:flex-start}@media(min-width:768px){.side-participant__points{align-items:flex-end}}.side-participant__points--opponent{align-items:flex-end}@media(min-width:768px){.side-participant__points--opponent{align-items:flex-start}}.side-participant__current-points{font-weight:700;color:#012837;font-size:.875rem;line-height:1rem}@media(min-width:768px){.side-participant__current-points{font-size:1rem;line-height:1.25rem}}@media(prefers-color-scheme:dark){.side-participant__current-points{color:#fff}}.side-participant__projected-points{font-size:.75rem;line-height:.875rem;color:#767777}@media(min-width:768px){.side-participant__projected-points{font-size:.875rem;line-height:1rem}}@media(prefers-color-scheme:dark){.side-participant__projected-points{color:#767777}}.side-participant__progress{display:flex;align-items:center;gap:.5rem;width:100%}.side-participant__progress--opponent{flex-direction:row-reverse}.side-participant__progress-bar{flex:1 1;display:flex;align-items:center;height:.25rem;border-radius:9999px;background-color:#f2f2f4}.side-participant__progress-fill{display:block;height:100%;border-radius:9999px}.side-participant__progress-fill--winning{background-color:#26cf86}.side-participant__progress-fill--losing{background-color:#f63c5b}.side-participant__progress-fill--opponent{margin-left:auto}.side-participant__percentage{font-size:.75rem;font-weight:700}.side-participant__percentage--winning{color:#187d52}.side-participant__percentage--losing{color:#f63c5b}.side-participant__stats{display:grid;grid-template-columns:1fr;grid-gap:.5rem;gap:.5rem}@media(min-width:768px){.side-participant__stats{grid-template-columns:repeat(2,1fr);gap:.75rem}}.side-participant__stats--opponent{justify-items:end}@media(min-width:768px){.side-participant__stats--opponent{justify-items:start}}.side-participant__stat{display:flex;align-items:center;gap:.25rem;font-size:.75rem;line-height:1rem;color:#767777}@media(min-width:768px){.side-participant__stat--end{justify-self:end}}.side-participant__stat-value{color:#012837;font-weight:700}@media(prefers-color-scheme:dark){.side-participant__stat-value{color:#fff}}