body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#slider-container {
    width: 100%; /* Zwiększamy szerokość kontenera na 100% */
    height: 240px; /* Zwiększamy wysokość kontenera na 240px */
    overflow: hidden;
    position: relative;
    margin-top: 20px; /* Dodajemy odstęp od góry */
}

#slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    width: 400px; /* Zwiększamy szerokość slajdów na 400px */
    height: 200px;
    flex-shrink: 0;
    object-fit: cover; /* Zapobiega przycinaniu zdjęć */
    border: 2px solid #ddd; /* Dodajemy obramowanie */
    margin-right: 20px; /* Zwiększamy odstęp między slajdami */
    cursor: pointer;
    transition: border 0.3s ease-in-out, transform 0.5s ease-in-out; /* Dodajemy efekt przejścia */
    text-decoration: none; /* Usuwamy domyślny podkreślnik na linkach */
    color: inherit; /* Zachowujemy domyślny kolor tekstu na linkach */
}

.slide:hover {
    border-color: #999; /* Kolor obramowania po najechaniu myszką */
}

#slider-controls {
    text-align: center;
    margin-top: 10px;
}

.slide-button {
    display: inline-block;
    margin: 0 5px;
    cursor: pointer;
}