Изменение свойства отображения CSS с помощью JS EventListener

Я пытаюсь добавить функциональность кнопке в проекте, над которым работаю... при нажатии кнопки я хочу, чтобы элемент больше не отображался на странице. Однако я не могу заставить этот процесс работать. Вот мой CSS-код для этого конкретного элемента:

.content-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40.06rem;
    min-width: 58rem;
    background: #ffffff;
    box-shadow: 0px 15px 60px rgba(0, 0, 0, 0.25);
    border-radius: 36px;
  }

Вот мой JS-код:

//Селекторы DOM

const button = document.getElementById("subscribe-button");
const mainPage = document.getElementsByClassName("content-container")[0];

//Прослушиватели событий

button.addEventListener("click", function (e) {
  if (mainPage.style.display === "flex") {
    mainPage.style.display = "none";
  }
});

Я добавил прослушиватель событий JS к кнопке на своей странице и ожидал, что нажатие кнопки изменит свойство отображения с «flex» на «none» и в результате соответствующий элемент больше не будет отображаться.

Однако, когда я нажимаю кнопку, ничего не происходит.

Если я изменю свою логику JS на следующий код, я смогу заставить ее работать:

button.addEventListener("click", function (e) {
  if (mainPage.style.display === "none") {
    mainPage.style.display = "flex";
  } else {
    mainPage.style.display = "none";
  }
});

Если я правильно понимаю, JS видит значение свойства display по умолчанию как «none», но в этом случае я явно определил «display: flex» в своем CSS, так почему же первый блок кода не работает, а второй работает правильно? Кроме того, если необходим второй блок кода (как кажется), есть ли более краткий способ написать это? Похоже, что первый блок оператора if ничего не делает, потому что всю работу выполняет блок else.