:root {
    --padding-cutii: 20px;
}

#cronologie-sectiune {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px 0;
    display: flow-root;
}

#cronologie-sectiune::before {
    content: '';
    position: absolute;

    top: 0;
    bottom: 0;
    left: 50%;

    width: 4px;
    border-radius: 15px;

    background: var(--gradient-culoare-1);
    box-shadow: 1px 3px 3px var(--culoare-1-intunecata);
}

.rand-cronologie {
    width: 50%;
    clear: both;
    position: relative;
    box-sizing: border-box;
}

.cutie-la-stanga {
    float: left;
    padding-right: var(--padding-cutii);
    text-align: right;
}

.cutie-la-stanga .cutie-cronologie {
    margin-left: auto;
}

.cutie-la-dreapta {
    float: right;
    padding-left: var(--padding-cutii);
    text-align: left;
}

.cutie-la-dreapta .cutie-cronologie {
    margin-right: auto;
}

.cutie-cronologie {
    color: var(--culoare-2-saturata);
    background: var(--gradient-culoare-1);

    border-radius: 15px;
    padding: 5px 15px;
    
    box-shadow: 3px 5px 5px var(--culoare-1-intunecata);

    width: fit-content;
    text-align: center;
    display: inline-block;
}

.cutie-cronologie * {
    margin: 5px;
}