Hide a div if sibling has an specific class

I have a div with the grafico class, and it has two children. One of them, the one with "terminal-alert" class, should not appear if it's sibling, the grafico-arc has the specific "green" class. I tried the jquery below, and managed to hide the "terminal-alert" div, but it does not appear on the ones where the sibling doesn't have the "green" class.

$(".grafico-arc").each(function() {
  if ($(this).hasClass("green")) {
    $(".terminal-alert").siblings().css("display", "none");
  }
});

<script src="http://ift.tt/1oMJErh"></script>
<div class="sliderCard">
  <div class="grafico">

    <div class="grafico-arc green">
      <div class="topo"></div>

      <div class="consumoTerminal">
        <h3>1 <span>GB</span></h3>
        <p>(21) 98899-0805</p>
        <button class="detail"></button>
      </div>

    </div>

    <div class="terminal-alert">
      <p>Saldo esgotando <a href="#">Mais internet</a></p>
    </div>

  </div>
</div>

<div class="sliderCard">
  <div class="grafico">

    <div class="grafico-arc yellow">
      <div class="topo"></div>

      <div class="consumoTerminal">
        <h3>2 <span>GB</span></h3>
        <p>(21) 98899-0805</p>
        <button class="detail"></button>
      </div>

    </div>

    <div class="terminal-alert">
      <p>Saldo esgotando <a href="#">Mais internet</a></p>
    </div>

  </div>
</div>

<div class="sliderCard">
  <div class="grafico">

    <div class="grafico-arc red">
      <div class="topo"></div>

      <div class="consumoTerminal">
        <h3>3 <span>GB</span></h3>
        <p>(21) 98899-0805</p>
        <button class="detail"></button>
      </div>

    </div>

    <div class="terminal-alert">
      <p>Saldo esgotando <a href="#">Mais internet</a></p>
    </div>

  </div>
</div>