Изменить стиль элемента из другого контейнера

мой шаблон:

  <div class="task">
    <div id="cont-1">
      <div class="task__path">
        <p>распарсить путь / /</p>
      </div>
      <app-task-title/>
    </div>
    <div id="cont-2">
      <div class="task__progress">
        <app-progress-bar/>
        <app-executor-time/>
      </div>
      <app-management/>
    </div>
  </div>
</div>

мои scss стили:

@import "../../../../../styles/index.scss";

$display: flex;

.task-wrapper {
  width: 100%;
  height: 130px;
  padding: 12px;
  border-radius: 8px;
  background-color: $bg-menu;
  box-shadow: $shadow-card;
  transition: box-shadow 0.3s ease;

  &:hover {
    box-shadow: 0 3px 10px 0 rgba(38, 58, 91, 0.2);
  }

  .task {
    gap: 20px;

    #cont-1 {
      &:hover {
        .task__path {
          display: flex;
        }
      }
    }

    #cont-2 {
      &:hover {
        .task__progress {
          display: none;
        }
        app-management {
          display: flex;
        }
      }
    }

    &__progress {
      display: flex;
      flex-direction: column;
      width: 100%;
      gap: 12px;
      height: 33px;
    }

    &__path {
      display: none;
    }

    app-management {
      display: none;
    }
  }
}

Мне нужно, использоваться display: none на task__progress, когда я навожусь на cont-1, в cont-2 у меня реализована подобная логика но в cont-1 оно не работает, так как я думал, из-за того что элементы находятся на разных уровнях Что мне нужно сделать чтобы я мог скрыть task__progress при наведении мышкой на cont-1? скрыть cont-2 тоже будет корректным вариантом