Error opening and closing modal

Javascript

var inicio = document.getElementById('inicio-modal');
var banner = document.getElementById('banner-modal');
var produto = document.getElementById('produtos-modal');

function abreInicio(){
    if (inicio.style.display == 'none') {
        inicio.style.display = 'block';
        banner.style.display = 'none';
        produto.style.display = 'none';
    }
}
function abreBanners(){
    if (banner.style.display == 'none') {
        banner.style.display = 'block';
        inicio.style.display = 'none';
        produto.style.display = 'none';
    }
}
function abreProdutos(){
    if (produto.style.display == 'none') {
        produto.style.display = 'block';
        inicio.style.display = 'none';
        banner.style.display = 'none';
    }
}

HTML

<div id="inicio-modal" class="modal"></div>
<div id="banner-modal" class="modal" style='display:none;'></div>
<div id="produtos-modal" class="modal" style='display:none;'></div>

CSS

.modal{
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1024px;
}

When the page is loaded and the first modal is open, everything works perfectly, but when you click the buttons to open and close the modal, they lose their css borders.