#journey{
    
    & > .journey-container{
        display: grid;
        grid-template-columns: 1fr 1fr;
        row-gap: 1rem;
        column-gap: 10rem;
        position: relative;
        &::after{
            content: '';
            position: absolute;
            top: 8.5rem;
            left: 0;
            right: 0;
            bottom: 8.5rem;
            width: 2px;
            margin: 0 auto;
            background: hsl(var(--hue-primary), 100%, 20%);
            border-radius: 50vw;
            z-index: -1;
        }
        & > .journey-container-card{
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            background: var(--linear-gradient_card);
            padding: 2rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 1.5rem;
            border-radius: 1rem;
            border: 2px solid hsl(var(--hue-primary), 100%, 20%);
            position: relative;
            & > .journey-container-card-header{
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 1rem;
                & > .journey-container-card-header-title{
                    font-size: 1.5rem;
                    font-weight: 600;
                    color: var(--color-primary);
                }
                & > .journey-container-card-header-date{
                    font-size: 0.875rem;
                    color: var(--color-secondary);
                    font-weight: 500;
                }
            }
            & > .journey-container-card-company{
                font-size: 1.25rem;
                color: var(--color-text_high);
                font-weight: 500;
            }
            & > .journey-container-card-description{
                font-size: 1.0625rem;
                color: var(--color-text_medium);
                line-height: 1.6;
            }
        }
    }
}

.journey-container-card::after, .journey-container-card::before{
    content: '';
    position: absolute;
    background-color: hsl(var(--hue-primary), 100%, 20%);

}


.journey-container-card_left::after, .journey-container-card_right::after{
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: hsl(var(--hue-secondary), 100%, 10%);
    z-index: 1;
    border: 2px solid hsl(var(--hue-primary), 100%, 20%);
}
.journey-container-card_left::after{
  right: -5.5rem
}
.journey-container-card_right::after{
  left: -5.5rem
}

.journey-container-card_left::before, .journey-container-card_right::before{
   height: 2px;
    width: 5rem;
}
.journey-container-card_left::before{
  right: -5rem;
  
}
.journey-container-card_right::before{
  left: -5rem;
  
}



/*----------------media queries-----------------*/
@media (max-width: 768px) {
    #journey{
        & > .journey-container{
            grid-template-columns: 1fr;
            column-gap: 20rem !important;
            & > .journey-container-space{
                background-color: red;
                display: none;

            }
        }
    }
}