Как менять задний фон при наведении на блок

.four__screen {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: green;
}
.font {
  width: 1600px;
  height: 720px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: red;
}
.cards {
  display: flex;
  justify-content: space-between;
  height: 600px;
  width: 1000px;
}
.card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 36px;
  width: 212px;
  height: 600px;
  overflow: hidden;
  background: white;
}
.card::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 212px;
  height: 600px;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: 0.3s ease-in-out;
}
.card:hover::before {
  opacity: 1;
}
.card:nth-child(1):hover ~ .four__screen {
  background: red;
}
.card:nth-child(2):hover ~ .four__screen {
  background: blue;
}
.card:nth-child(3):hover ~ .four__screen {
  background: purple;
}

<div class="four__screen">
            <div class="font">
               <h2>Текст</h2>
               <div class="cards">
                  <div class="card"></div>
                  <div class="card"></div>
                  <div class="card"></div>
               </div>
            </div>
         </div>