css – Tips on how to change the colour of a component when hover on one other?

I’ve this code:

 <div className="appointment-test">
        <div className="appointment-time">
            <p className="start-time">12 A.M</p>
            <p>12 P.M</p>
            <div className="outerline"></div>
        </div>
        <div className="vertical-line"></div>
        <div className="kind">
            <h4 className="txt">Offline Session</h4>
            <h5 className="affected person">Hanoka</h5>
        </div>
    </div>

and I would like when hover on kind class to vary the background shade of outerline class and in addition the background shade of appointment-time::after

That is additionally the css of every class:

.appointment-test {
    place: relative;
    padding: 20px 10px;
    show: flex;
    align-items: middle;
    width: 340px;
}

.appointment-time {
    font-size: 13px;
    font-weight: 500;
    place: relative;
    shade: #bab9be;
    width: 50px;
    margin-right: 50px;
}

.appointment-time::after {
    content material: " ";
    width: 7px;
    peak: 7px;
    border-radius: 50px;
    background-color: #bab9be;
    place: absolute;
    left: 67px;
    prime: 40%;
}

.start-time {
    margin-bottom: 10px;
}

.outerline {
    place: absolute;
    left: 63px;
    width: 15px;
    peak: 15px;
    border: #bab9be 1px stable;
    prime: 32%;
    border-radius: 50%;
}

.vertical-line {
    shade: clear;
    place: absolute;
    left: 80px;
    peak: 125%;
    prime: -13px;
    border-left: #bab9be 1px stable;
}

.kind {
    shade: #bab9be;
    padding: 20px 50px 20px 15px;
    border-radius: 10px;
    background-color: #fafafa;
    max-width: 270px;
    show: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.kind:hover {
    background-color: var(--main-color);
    shade: #fff;
    cursor: pointer;
}

.txt {
    font-size: 14px;
    font-weight: 700;
    text-overflow: ellipsis;
}

.affected person {
    font-size: 12px;
    font-weight: 500;
}

May you assist me?..Thanks prematurely