/*   === TIMELINE ===
        ----------      */
.box-timeline { /* z-index = 6 */
    margin: 0 auto 1.5rem auto;
    position: relative;
    width: 38rem;
    height: 128px;
    /* border: 1px solid #6ad400; /* D E L E T E */
}
.btl-svg {
    position: absolute;
    top: 24px;
    left: 0;
    z-index: 7; /* .main-tag = 6 */
    width: 608px;
    height: 80px;
    background-image: url("../img/time-line-horizont.svg");
    background-repeat: no-repeat;
}
.btl-data {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8; /* .main-tag = 6 */
    /* width: 7rem; */
    height: auto;
}

.btl-data span:nth-child(2),
.btl-data span:nth-child(3),
.btl-data span:nth-child(5),
.btl-data span:nth-child(6) {
    position: absolute;
    width: 5.5rem;
    font-family: "Instrument Sans", sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: none;
    line-height: 36px;
    color: hsla(var(--clr-black) / 0.6);
    text-align: center;
    border:1px solid hsla(var(--clr-black) / 0.2);
    
}
.btl-data span:nth-child(2) {
    left: 212px;
    border-radius: 0 1rem 1rem 1rem;
    top: 80px;
}
.btl-data span:nth-child(3) {
    left: 116px;
    border-radius: 1rem 0 1rem 1rem;
    top: 80px;
}
.btl-data span:nth-child(5) {
    left: 402px;
    border-radius: 0 1rem 1rem 1rem;
    top: 80px;
}
.btl-data span:nth-child(6) {
    left: 308px;
    border-radius: 1rem 0 1rem 1rem;
    top: 80px;
}

.btl-data span:nth-child(1),
.btl-data span:nth-child(4) {
    font-family: "EB Garamond", serif;
    font-size: 2rem;
    font-weight: 500;
    color:hsla(var(--clr-black) / 0.9);
    position: absolute;
}
.btl-data span:nth-child(1) {
    top: 4px;
    left: 170px;
}
.btl-data span:nth-child(4) {
    top: 4px;
    left: 364px;
}
.btl-data span:hover {
    color: hsla(var(--clr-black) / 0.9);
    font-weight: 500;
}