:root{--page-title-display:none;}/* Start custom CSS */.main-container {
    display: flex;
  
    height: 500px; /* Stała wysokość całego kontenera */
    transition: all 0.8s ease-in-out; /* Dłuższe i bardziej płynne przejście */
}

.left-container, .right-container {
    flex: 1;
    min-width: 20%;
    transition: flex 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); /* Płynniejsza animacja */
    overflow: hidden;
    height: 100%; /* Stała wysokość kontenerów */
    display: flex;
    align-items: center; /* Wyrównuje obrazek w pionie */
    justify-content: center; /* Wyrównuje obrazek w poziomie */
}

.left-container img, .right-container img {
    width: 100%;  /* Obraz dopasowuje szerokość do kontenera */
    height: auto; /* Kluczowa zmiana – wysokość obrazu nie zmienia się */
    max-height: 100%; /* Zapobiega przekroczeniu wysokości kontenera */
    object-fit: cover; /* Zapewnia, że obraz się nie rozciąga */
    transition: width 0.8s ease-in-out; /* Płynna zmiana szerokości */
}

/* Kiedy mysz jest nad głównym kontenerem, zapobiegamy glitchowaniu */
.main-container:hover .left-container,
.main-container:hover .right-container {
    flex: 1; /* Utrzymujemy domyślną szerokość */
}

/* Zastosowanie "body:hover" zapobiega resetowaniu efektu */
body:hover .main-container:hover .left-container:hover {
    flex: 1.9;
}

body:hover .main-container:hover .left-container:hover + .right-container {
    flex: 0.9;
}

body:hover .main-container:hover .right-container:hover {
    flex: 1.9;
}

body:hover .main-container:hover .right-container:hover ~ .left-container {
    flex: 0.9;
}/* End custom CSS */