#fixture.phase2{
    overflow: hidden;
}


#fixture:not(.gallery) > div > ul > li::after{
    content: '';
    display: block;
    position: absolute;
    width: 10px;
    height: var(--line-height);
    right: -18px;
}


#fixture > div.octavos{
    --porcentaje: 16;
    --line-height: 25px;
}

#fixture > div.cuartos{
    --porcentaje: 8;
    --line-height: 50px;
}

#fixture > div.semis{
    --porcentaje: 4;
    --line-height: 120px;
}

#fixture > div.final{
    --line-height: 0;
    --porcentaje: 0;
}

#fixture > div.octavos{
    --dividendo: 8;
}

#fixture > div.cuartos{
    --dividendo: 4;
}

#fixture > div.semis{
    --dividendo: 2;
}

#fixture > div.final{
    --dividendo: 0;
}


#fixture > div li:nth-child(2){
    --offset: calc( ( 100% / var(--dividendo) ) * calc( var(--dividendo) - 2 ) );
}

#fixture > div li:nth-child(4){
    --offset: calc( ( 100% / var(--dividendo) ) * calc( var(--dividendo) - 4 ) );
}

#fixture > div li:nth-child(6){
    --offset: calc( ( 100% / var(--dividendo) ) * calc( var(--dividendo) - 6 ) );
}


#fixture > div li:nth-child(3){
    --offset: calc( ( 100% / var(--dividendo) ) * calc( var(--dividendo) - 2 ) );
}

#fixture > div li:nth-child(5){
    --offset: calc( ( 100% / var(--dividendo) ) * calc( var(--dividendo) - 4 ) );
}

#fixture > div li:nth-child(7){
    --offset: calc( ( 100% / var(--dividendo) ) * calc( var(--dividendo) - 6 ) );
}


#fixture > div > ul > li:nth-child(odd)::after{
    top: calc( ( 100% / var(--porcentaje) ) + var(--offset) );
    border: 2px solid white;
    border-radius: 0 5px 0 0;
    border-bottom: none;
    border-left: none;
}

#fixture > div > ul > li:nth-child(even)::after{
    bottom: calc( ( 100% / var(--porcentaje) ) + var(--offset) );
    border: 2px solid white;
    border-radius: 0 0 5px 0;
    border-top: none;
    border-left: none;
}