.krogci {
    width: 2.7vw;
    height: 2.7vw;
    border-radius: 50%;
    background: #2d89ef;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Verdana, Tahoma, sans-serif;
    font-size: 1.5vw;
    text-align: center;
}

.krogci.in-chord {
    background: #68ff68;
    /* green */
    color: #000;
    border: 0.12vw solid #000;
}

/* Container for four columns */
.stolpci {
    display: flex;
    gap: 0.2vw;
    align-items: flex-start;
    justify-self: center;
}

.stolpec {
    display: flex;
    flex-direction: column;
    gap: 0.2vw;
}

/* Stagger 1st and 3rd columns so their first circle sits halfway between
   the first and second circle of the adjacent column (middle column). */
/* apply staggering per .stolpci so it affects both center and right groups */
.stolpci>.stolpec:nth-child(odd) {
    /* half of (circle height + vertical gap) */
    margin-top: calc((2.7vw + 0.2vw) / 2);
}

/* Position the 4th column so its first circle aligns with the 5th circle of the 2nd column
   Offset = (circle height + gap) * (5 - 1) = 4 * (2.6vw + 0.6vw) */
.stolpci>.stolpec:nth-child(4) {
    margin-top: calc((2.7vw + 0.2vw) * 4);
}

/* make sure the #izbrani_podatki and columns sit horizontally */
#izbrani_podatki {
    grid-column: 1 / 2;
    display: block;
    padding-left: 1.6vw;
    padding-top: 1.2vw;
}

/* Overall page layout: divide into three equal vertical columns */
body {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: start;
}

/* wrapper for the columns and its title */
.stolpci_wrapper {
    grid-column: 2 / 3;
    /* default: center third */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stolpci_wrapper.right {
    grid-column: 3 / 4;
    /* right third */
}

.stolpci-title {
    margin: 1vw 0 2.5vw 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.7vw;
    color: #111;
    width: 100%;
    text-align: center;
}