/* SquadIndex shared media sizing system
   Use the same four semantic sizes everywhere:
   small / normal / big / huge.
*/

:root{
  --si-logo-small:20px;
  --si-logo-normal:32px;
  --si-logo-big:48px;
  --si-logo-huge:96px;

  --si-photo-small:32px;
  --si-photo-normal:48px;
  --si-photo-big:72px;
  --si-photo-huge:132px;
}

.si-logo{
  display:block;
  flex:none;
  object-fit:contain;
  object-position:center;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  filter:none;
}
.si-logo--small{width:var(--si-logo-small)!important;height:var(--si-logo-small)!important}
.si-logo--normal{width:var(--si-logo-normal)!important;height:var(--si-logo-normal)!important}
.si-logo--big{width:var(--si-logo-big)!important;height:var(--si-logo-big)!important}
.si-logo--huge{width:var(--si-logo-huge)!important;height:var(--si-logo-huge)!important}

.si-player-photo{
  display:block;
  flex:none;
  object-fit:cover;
  object-position:50% 18%;
  background:transparent;
  border:0;
}
.si-player-photo--small{width:var(--si-photo-small)!important;height:var(--si-photo-small)!important}
.si-player-photo--normal{width:var(--si-photo-normal)!important;height:var(--si-photo-normal)!important}
.si-player-photo--big{width:var(--si-photo-big)!important;height:var(--si-photo-big)!important}
.si-player-photo--huge{width:var(--si-photo-huge)!important;height:var(--si-photo-huge)!important}

.si-media-frame{
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:transparent;
}
.si-media-frame--small{width:32px;height:32px}
.si-media-frame--normal{width:48px;height:48px}
.si-media-frame--big{width:72px;height:72px}
.si-media-frame--huge{width:132px;height:132px}

@media(max-width:759px){
  :root{
    --si-logo-huge:82px;
    --si-photo-huge:118px;
  }
}