.awardingLayout{
    --podium-margin: 0.3vw;
    --podium-padding: 0.3vw;
    --podium-width: 50vw;
    --place-font: calc(var(--podium-width) / 10);
    --name-font:  calc(var(--podium-width) / 40);
    --category-font:  calc(var(--podium-width) / 40);    
    --padding-margin: calc(var(--podium-padding) + var(--podium-margin));
}

.awardingLayout td{
   position:relative
}

.awardingMonitor{
    --podium-margin: 0.3vw;
    --podium-padding: 0.3vw;
    --podium-width: 100vw;
    --place-font: calc(var(--podium-width) / 10);
    --name-font:  calc(var(--podium-width) / 40);
    --category-font:  calc(var(--podium-width) / 40);
    --padding-margin: calc(var(--podium-padding) + var(--podium-margin));
}

body{
    background-color: black;
    color:white;
}

.awardingMonitor,.awardingBackground{
    position: absolute;
    display:inline-block;
    top:0;bottom:0;left: 0;right:0;
    overflow: hidden;
}

.awardingBackground img.organizerLogo{
    position: absolute;
    aspect-ratio:1;
    height: 75vh;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.awardingBackground .tournamentName{
    font-size: var(--category-font);
    text-align: center;
}

.awardingLayout .podium .organizerLogo{
   position: absolute;
   width: 3.5vw;
   height: 3.5vw;
   top: 15.5%;
   right: 6.5%;
}

.awardingMonitor .podium .organizerLogo{
   position: absolute;
   width: 7vw;
   height: 7vw;
   top: 15.5%;
   right: 6.5%;
}

.podium, .podium *{
    box-sizing: content-box;
}

.podium{
    aspect-ratio: 16/9;
    position: relative;
    border-bottom: 1px solid grey;
    width: var(--podium-width);
    background-image: url(../../images/pedestal.png);
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat no-repeat;
    left: 0;
    top: 0;
}

.place{
    border-bottom: none;
    position: absolute;
    display: inline-block;
    bottom: 0;
}

.place[place="2"]{
    left: 19%;
    height: 23%;
    width: 15%;
    bottom: 32%;
}

.place[place="1"]{
    left: 50%;
    height: 23%;
    width: 13%;
    transform: translateX(-50%);
    bottom: 45%;
}

.place[place="3"]{
    left: 62.2%;
    height: 23%;
    width: 15%;
    bottom: 24%;
}

.place[place="4"]{
    left: 77.8%;
    height: 23%;
    width: 15%;
    bottom: 24%;
}


.place > div{
    width: calc(var(--podium-width)/4 - var(--padding-margin)*2);
    position: absolute;
    display: inline-block;
}
.place .flag{
    aspect-ratio: 1;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: bottom;
    background-size: contain;
    left: 50%;
    width: 60%;
    bottom: 53%;
    position: absolute;
    transform: translateX(-50%);
}

.place .photo{
    aspect-ratio: 1;
    background-repeat: no-repeat;
    background-position-x: center;
    background-size: contain;
    width: calc(var(--podium-width)*0.07);
}

.place div.photo{
    display: none;
}

.place[place="4"] > div.photo{
    right: 0;
    text-align: right;
}

.place .fullname{
   bottom: 0;
   font-size: var(--name-font);
   width: 100%;
   height: 44%;
   text-align: center;
   overflow: hidden;
}

.categoryName{
    text-align: center;
    font-size: var(--category-font);
    width: 50%;
    left: 25%;
    position: absolute;
    top: 5%;
}