/* Lewy i prawy pasek */
.left-bar,
.right-bar {
    width: 37.5%;
    background-color: transparent; /* Bez tła */
}

.right-bar {
    display: flex;
    flex-direction: column; /* Domyślnie elementy są ułożone pionowo */
    align-items: center; /* Wyśrodkowanie mapy */
    justify-content: flex-start;
    height: 100vh; /* Pełna wysokość dla prawego paska */
}

/* Środkowy pasek */
.middle-bar {
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #333;
    position: relative;
    min-height: 100%; /* Ustawienie minimalnej wysokości, aby pokryć zawartość */
    flex-grow: 1; /* Pozwala na rozciąganie w pionie */
}

/* Responsywność dla średnich ekranów, takich jak tablety */
@media (max-width: 1024px) {
    .left-bar,
    .right-bar {
        width: 30%;
    }
    .middle-bar {
        width: 40%;
        min-height: auto; /* Dostosowuje wysokość do zawartości */
    }
}

/* Responsywność dla małych ekranów, takich jak smartfony */
@media (max-width: 768px) {
    .left-bar,
    .right-bar {
        width: 100%;
        height: auto; /* Dopasowanie wysokości do zawartości */
    }
    .middle-bar {
        width: 100%;
        height: auto; /* Zapewnia, że środkowy div rozciąga się zgodnie z zawartością */
        padding: 10px; /* Dodanie paddingu dla lepszego wyświetlania na mniejszych ekranach */
        min-height: auto; /* Usuwa minimalną wysokość, aby umożliwić rozciąganie */
    }
}