Как немедленно обновить вычисляемые стили, когда применяется новое медиа-правило?

Question

Я работаю над динамически реагирующим объявлением, в котором есть различные правила для мультимедиа, чтобы учесть разные возможные размеры рекламы. В зависимости от размера страницы будет отображаться различный контент.

Я установил некоторые условия JS, которые будут применять разные стили, когда цена отсутствует, если медиа-правило, показывающее определенный элемент, активно.

Это работает нормально, если размер страницы не изменился после загрузки. Когда ширина страницы изменяется достаточно, активируйте другое правило мультимедиа, стили JS из старого правила мультимедиа остаются, чего я не хочу.

Вот очень упрощенный / общий пример:

var item = document.getElementById("item");
var itemPrice = document.getElementById("price");
var itemIntro = document.getElementById("intro");
var priceDisplayValue = itemPrice.style.display;
var introAlpha = window.getComputedStyle(itemIntro).getPropertyValue("opacity");

if ((introAlpha == "1") && priceDisplayValue == "none") {
  item.style.background = "#0099cc";
  itemIntro.style.fontSize = "3em";
}

.ad{
  position: absolute;
  width: 100%;
  height: 100%;
  background: #ccc;
  font-size: 2em;
  text-align: center;
  color: #333;
}

.item{
  position: absolute;
  width: 100%;
  height: 100%;
  background: #AAA;
}

#intro {
  opacity: 0;
}

@media (min-width: 600px){
  #intro{
    opacity: 1;
  }
}

<div class="ad">
  <div class="item item1" id="item">
    <p class="intro" id="intro">Item1 intro text</p>
    <p class="price" id="price" style="display: none;">Price</p>
    <p class="details" id="details">Learn more</p>
  </div>

</div>

Если ширина страницы превышает 600 пикселей, а цена не отображается, цвет фона меняется с серого на синий, а размер шрифта увеличивается.

Я просто пытаюсь выяснить, как сбросить вычисленные стили, если правило мультимедиа изменяется и исходное условие больше не выполняется.

Любое понимание очень ценится.