#pavouk {
        display: -ms-grid;
        display: grid;

        -ms-grid-columns: 1fr 1fr 1fr 1fr;
        grid-template-columns: repeat(4, 1fr);
        -ms-grid-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: repeat(9, 1fr);

        grid-row-gap:    15px;
        grid-column-gap: 15px;
        width: 100%;
        height: 100%;
        padding: 10px;
        border: solid thin black;
        margin: 0 auto;
    }

    #nadpis_OF {
        -ms-grid-column: 1;
        -ms-grid-row: 1;
        grid-area: 1 / 1 / 2 / 2;
    }

    #nadpis_CF {
        -ms-grid-column: 2;
        -ms-grid-row: 1;
        grid-area: 1 / 2 / 2 / 3;
    }

    #nadpis_SF {
        -ms-grid-column: 3;
        -ms-grid-row: 1;
        grid-area: 1 / 3 / 2 / 4;
    }

    #nadpis_FIN {
        -ms-grid-column: 4;
        -ms-grid-row: 1;
        grid-area: 1 / 4 / 2 / 5;
    }

    #zapas49 {
        -ms-grid-column: 1;
        -ms-grid-row: 2;
        grid-area: 2 / 1 / 3 / 2;
    }

    #zapas50 {
        -ms-grid-column: 1;
        -ms-grid-row: 3;
        grid-area: 3 / 1 / 4 / 2;
    }

    #zapas53 {
        -ms-grid-column: 1;
        -ms-grid-row: 4;
        grid-area: 4 / 1 / 5 / 2;
    }

    #zapas54 {
        -ms-grid-column: 1;
        -ms-grid-row: 5;
        grid-area: 5 / 1 / 6 / 2;
    }

    #zapas51 {
        -ms-grid-column: 1;
        -ms-grid-row: 6;
        grid-area: 6 / 1 / 7 / 2;
    }

    #zapas52 {
        -ms-grid-column: 1;
        -ms-grid-row: 7;
        grid-area: 7 / 1 / 8 / 2;
    }

    #zapas55 {
        -ms-grid-column: 1;
        -ms-grid-row: 8;
        grid-area: 8 / 1 / 9 / 2;
    }

    #zapas56 {
        -ms-grid-column: 1;
        -ms-grid-row: 9;
        grid-area: 9 / 1 / 10 / 2;
    }

    #zapas57 {
        -ms-grid-column: 2;
        -ms-grid-row: 2;
        /*-ms-grid-column-span: 2;*/
        grid-area: 2 / 2 / 4 / 3;
    }

    #zapas58 {
        -ms-grid-column: 2;
        -ms-grid-row: 4;
        grid-area: 4 / 2 / 6 / 3;
    }

    #zapas59 {
        -ms-grid-column: 2;
        -ms-grid-row: 6;
        grid-area: 6 / 2 / 8 / 3;
    }

    #zapas60 {
        -ms-grid-column: 2;
        -ms-grid-row: 8;
        grid-area: 8 / 2 / 10 / 3;
    }

    #zapas61 {
        -ms-grid-column: 3;
        -ms-grid-row: 3;
        grid-area: 3 / 3 / 5 / 4;
    }

    #zapas62 {
        -ms-grid-column: 3;
        -ms-grid-row: 7;
        grid-area: 7 / 3 / 9 / 4;
    }

    #zapas63 {
        -ms-grid-column: 4;
        -ms-grid-row: 4;
        grid-area: 4 / 4 / 6 / 5;
        background-color: #cd7f32;
    }

    #zapas64 {
        -ms-grid-column: 4;
        -ms-grid-row: 6;
        grid-area: 6 / 4 / 8 / 5;
        background-color: gold;
    }

    .nadpis {
        font-size: 1.6rem;
        font-weight: bold;
        text-align: center;
        background-color: silver;
    }

    .osmifinale {
        background-color: lightgreen;
    }

    .ctvrtfinale {
        background-color: pink;
        height: 120px;
        margin-top: 25%;
    }

    *::-ms-backdrop, .ctvrtfinale {
        margin-top: 50%;
    }

    .semifinale {
        background-color: lightblue;
        height: 120px;
        margin-top: 25%;
    }

    *::-ms-backdrop, .semifinale {
        margin-top: 50%;
    }

    .finale {
        height: 120px;
        margin-top: 25%;
    }

    *::-ms-backdrop, .finale {
        margin-top: 50%;
    }

    #pavouk div {
        padding: 10px;
        border-radius: 10px;
    }