JS adds class but styles are not applied - why?

Question

css

Guys, help me, I've already broken my head!
I want to change the css styles when I click on the button, the class is added, but the styles are not applied.

.section {
    padding-top: 110px;
    background-color: #27262b;
    padding-bottom: 110px;
}
.section-light {
    padding-top: 110px;
    background-color: #fffefe;
    padding-bottom: 110px;
}

var buttonchange = document.querySelector(".change");
var section = document.querySelector(".section");

buttonchange.addEventListener("click", function(){
    section.classList.add(".section-light");
});

Answer 1

I understand that you add the class also with a dot, but this is not necessary. You should add additional classes simply with a space. class="class1 class2" - no new dots