.phase-timeline-wrapper{
    padding:58px 25px 65px;
}

.phase-timeline{
    width:100%;
}

.phase-timeline-inner{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:12px;
}

.phase-timeline-phase{
    display:block;
    min-width:0;

    color:#000;
    text-decoration:none;
    text-align:center;
}

.phase-timeline-phase:visited{
    color:#000;
}

.phase-timeline-phase:hover{
    color:#000;
    text-decoration:none;
}

/********** Phase Bar **********/

.phase-timeline-phase-marker{
    width:100%;
    height:10px;

    margin-bottom:13px;

    border:0;
    border-radius:0;

    background:#d6d6d6;
    box-sizing:border-box;
}


.phase-timeline-phase-marker{
    background: #efefef;
}

/* phase 1 */
.current-phase-1 .phase-timeline-phase:nth-child(1) .phase-timeline-phase-marker,
.current-phase-2 .phase-timeline-phase:nth-child(1) .phase-timeline-phase-marker,
.current-phase-3 .phase-timeline-phase:nth-child(1) .phase-timeline-phase-marker,
.current-phase-4 .phase-timeline-phase:nth-child(1) .phase-timeline-phase-marker{
    background:var(--main-color-gold);
}

/* phase 2 */
.current-phase-2 .phase-timeline-phase:nth-child(2) .phase-timeline-phase-marker,
.current-phase-3 .phase-timeline-phase:nth-child(2) .phase-timeline-phase-marker,
.current-phase-4 .phase-timeline-phase:nth-child(2) .phase-timeline-phase-marker{
    background: var(--main-color-green);
}

/* phase 3 */
.current-phase-3 .phase-timeline-phase:nth-child(3) .phase-timeline-phase-marker,
.current-phase-4 .phase-timeline-phase:nth-child(3) .phase-timeline-phase-marker{
    background:var(--secondary-color-medium-gray);
}

/* phase 4 */
.current-phase-4 .phase-timeline-phase:nth-child(4) .phase-timeline-phase-marker{
    background:var(--main-color-gray);
}

/********** Hover / Focus **********/

.phase-timeline-phase:hover .phase-timeline-phase-marker{
    filter:brightness(.9);
}

.phase-timeline-phase:focus-visible{
    outline:2px solid #000;
    outline-offset:5px;
}


/********** Current Phase **********/

.phase-timeline-phase.active .phase-timeline-phase-title{
    font-weight:500;
}

.phase-timeline-phase.active .phase-timeline-phase-marker{
    box-shadow:0 2px 0 rgba(0,0,0,.15);
}

.phase-timeline-phase.locked{
    cursor:not-allowed;
    opacity:1;
}

.phase-timeline-phase.locked .phase-timeline-phase-marker{
    filter:none;
}


/********** Phase Title **********/

.phase-timeline-phase-title{
    width:100%;

    padding:0 8px;

    font-size:15px;
    line-height:1.25;
    text-align:center;

    box-sizing:border-box;
}

@media (max-width:768px){

    .phase-timeline-wrapper{
        padding:35px 20px 40px;
        overflow-x:auto;
    }

    .phase-timeline{
        overflow-x:auto;
    }

    .phase-timeline-inner{
        min-width:650px;
        grid-template-columns:repeat(4, minmax(0, 1fr));
    }

}

@media (max-width: 600px){
    .phase-timeline-wrapper {
        width: 100%;
        padding: 20px 0;
    }

    .phase-timeline {
        width: 100%;
    }

    .phase-timeline-inner {
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    .phase-timeline-phase {
        position: relative;
        display: flex;
        align-items: center;
        gap: 25px;
        min-height: 75px;
        padding: 10px 0 10px 10px;
        text-align: left;
        text-decoration: none;
        box-sizing: border-box;
    }

    /* Connecting line between phases */
    .phase-timeline-phase:not(:last-child)::after {
        content: "";
        position: absolute;
        left: 20px;
        top: 50%;
        height: 100%;
        width: 3px;
        background: #ddd;
        z-index: 0;
    }

    /* Colored circles */
    .phase-timeline-phase-marker {
        position: relative;
        flex: 0 0 23px;
        width: 23px;
        height: 23px;
        margin: 0;
        border-radius: 50%;
        z-index: 1;
        box-sizing: border-box;
    }

    .phase-timeline-phase-title {
        font-size: 16px;
        line-height: 1.4;
        color: #111;
        text-align: left;
    }

    /* Phase colors */
    .phase-timeline-phase:nth-child(1) .phase-timeline-phase-marker {
        background: #c5a04a;
    }

    .phase-timeline-phase:nth-child(2) .phase-timeline-phase-marker {
        background: #888d93;
    }

    .phase-timeline-phase:nth-child(3) .phase-timeline-phase-marker {
        background: #888d93;
    }

    .phase-timeline-phase:nth-child(4) .phase-timeline-phase-marker {
        background: #888d93;
    }

    /* Active phase */
    .phase-timeline-phase.current .phase-timeline-phase-marker {
        flex-basis: 27px;
        width: 27px;
        height: 27px;
        margin-left: -2px;
        margin-right: -2px;
        border: 4px solid white;
        outline: 3px solid #50555e;
    }

    .phase-timeline-phase.current .phase-timeline-phase-title {
        font-weight: 700;
    }

    /* Locked phases */
    .phase-timeline-phase.locked {
        cursor: default;
    }

    .phase-timeline-phase.locked .phase-timeline-phase-title {
        color: #777;
    }
}