Assigning a CSS style to a specific element within a div

Hello!

I'm doing a project and I have a Div flexbox-container that has three daughter div, card-home-main.

I would like to do an effect by hovering over card-home-main, but when I do that, by hovering over one, all the other two also get the effect simultaneously. In addition, all divs within card-home-main also receive the effect, so if you hover over an image inside it, the image itself will receive the effect.

How to do to limit that only the Div whose mouse is on top, get the effect at a time? And also limit that the components inside it do not receive it.

I left an example of what I'm doing in the example below

.div-rectangle-main {
  width: 100%;
  height: 100%;
  left: 100%;
  top: 492px;
  background: linear-gradient(192deg, #3D4554 -10.36%, #242B36 45.63%, #1D1D1D 117.21%);
}

.div-rectangle-main .main-logo {
  display: block;
  padding-top: 79px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0%;
  width: 250px;
}

.div-rectangle-main .main-title {
  font-family: Nunito Sans;
  font-style: normal;
  font-weight: 800;
  margin-top: 36px;
  font-size: 40px;
  line-height: 55px;
  text-align: center;
  color: #2CC3D5;
}

.div-rectangle-main .main-subtitle {
  font-family: Nunito Sans;
  font-style: normal;
  font-weight: bold;
  color: #FFFFFF;
  margin-top: 20px;
  margin-bottom: 200px;
  font-size: 1.25rem;
  line-height: 200%;
  text-align: center;
}

.div-rectangle-main .main-subtitle .main-subsubtitle {
  font-weight: normal;
}

.flexbox-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20%;
}

.flexbox-container .card-home-main {
  width: 18%;
  height: auto;
  margin-top: -9%;
  margin-left: 5.8%;
  background: #FFFFFF;
  border: 1px solid #EAEEEE;
  box-sizing: border-box;
  box-shadow: 0px 4px 4px rgba(51, 51, 51, 0.15);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  transition: height 1000ms;
}

.flexbox-container .card-home-main:nth-of-type(1) {
  margin-left: 0.8%;
}

.flexbox-container :hover {
  height: 400px;
}

.card-home-main .card-img {
  height: auto;
  width: auto;
  margin-left: 25%;
  margin-top: 10%;
}

.section-icon-circle-card {
  border-radius: 100%;
  width: 108px;
  height: 108px;
  padding: 18px;
  margin-top: 4.95%;
  margin-bottom: 4.95%;
  margin-left: 6.42%;
}

.section-icon-circle-card--bot {
  background: rgba(44, 195, 213, 0.2);
}

.section-icon-circle-card--watermelon {
  background: rgba(246, 102, 137, 0.2)
}

.section-icon-circle-card--warning {
  background: rgba(255, 207, 51, 0.2);
}

.card-home-main .card-info {
  float: left;
  height: 100%;
  width: 100%;
  max-width: 100% !important;
  padding-top: 0%;
  overflow: auto;
}

.card-home-main .card-info .card-title {
  font-family: Nunito Sans;
  font-style: normal;
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 120%;
  color: #607B99;
  width: 50%;
  margin-left: 25%;
  text-align: center;
}

.card-home-main .card-info .card-icon {
  margin-left: 40%;
}

.card-home-main .card-info .card-text {
  display: none;
  font-family: Nunito Sans;
  font-style: normal;
  font-weight: bold;
  font-size: 0.75rem;
  line-height: 120%;
  color: #3D4554;
  width: fit-content;
  margin-right: 20%;
}

.card-home-main .card-info .card-text-mobile {
  display: none;
}

.buttton-card:hover {
  background: #2498A8;
  color: #FFFFFF;
}

<div>
  <div class="div-rectangle-main">
    <h1 class="main-title"> Lore lore lore!</h1>
    <div class="main-subtitle">
      lore lore lore
      <p class="main-subsubtitle">lore lore lore lore =)</p>
    </div>
  </div>
  <div class="flexbox-container">
    <div class="card-home-main" id="card1">
      <div class="card-img">
        <div class="section-icon-circle-card section-icon-circle-card--bot">
          <img src="img/illustrations/Estrela-1.svg" />
        </div>
      </div>
      <div class="card-info">
        <div class="card-title">
          <h3>Basico</h3>
        </div>
        <p class="card-text">lore lore lore.</p>
        <div class="card-icon">
          <BlipIcon name="arrow-ball-down-solid" class="bp-fs-1 bp-fill-bot"></BlipIcon>
        </div>
        <p class="card-text-mobile">lore lore lore</p>
      </div>
    </div>

    <div class="card-home-main" id="card2">
      <div class="card-img">
        <div class="section-icon-circle-card section-icon-circle-card--watermelon">
          <img src="img/illustrations/Estrela-2.svg" />
        </div>
      </div>
      <div class="card-info">
        <div class="card-title">
          <h3>Inter</h3>
        </div>
        <div class="card-icon">
          <BlipIcon name="arrow-ball-down-solid" class="bp-fs-1 bp-fill-bot"></BlipIcon>
        </div>
        <p class="card-text">lore lore lore.</p>
        <p class="card-text-mobile">Lore lore lore.</p>
      </div>
    </div>
    <div class="card-home-main" id="card3">
      <div class="card-img">
        <div class="section-icon-circle-card section-icon-circle-card--warning">
          <img src="img/illustrations/Estrela-3.svg" />
        </div>
      </div>
      <div class="card-info">
        <div class="card-title">
          <h3>Avan</h3>
        </div>
        <div class="card-icon">
          <BlipIcon name="arrow-ball-down-solid" class="bp-fs-1 bp-fill-bot"></BlipIcon>
        </div>
        <p class="card-text">Lore lore lore</p>
        <p class="card-text-mobile">lore lore lore lore</p>
      </div>
    </div>
  </div>
</div>