* {
    box-sizing: border-box;
}

/* ======================================================= */
/* 1. KONTENER GŁÓWNY (ASPECT RATIO 16:10) */
/* ======================================================= */
.slideshow-container {
    /* Wymusza proporcje 16:10: (10 / 16) * 100% = 62.5% */
    position: relative;
    /* margin: auto; */
    width: 100%;
    padding-bottom: 52.5%; 
    height: 0; /* Zapewnia, że padding-bottom działa jako wysokość */
    overflow: hidden; 
    
    /* Gwarantuje czarne tło w trakcie przejścia, eliminując prześwitywanie białego tła strony */
    /* background-color: black;  */
}

/* ======================================================= */
/* 2. SLIDES (.mySlides) i ANIMACJA FADE */
/* ======================================================= */

/* Podstawowe pozycjonowanie slajdów dla animacji */
.mySlides {
    /* Kluczowe dla fade: nakładanie slajdów */
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Domyślnie niewidoczne i ustawione przejście */
    opacity: 0; 
    transition: opacity 1.0s ease-in-out; /* Płynne przejście 1.0s */
    
    /* Reguła 'display: none' musi być usunięta,
       ponieważ blokuje animację przejścia. Logika jest w opacity. */
    /* display: none; */ 
}

/* Stan aktywnego slajdu (widoczny) */
.mySlides.active {
    opacity: 1;
}

/* ======================================================= */
/* 3. ASPECT RATIO BOX I OBRAZEK (Object-fit: cover) */
/* ======================================================= */

/* Kontener dla obrazka, wypełniający .mySlides */
.aspect-ratio-box {
    width: 100%;
    height: 100%;
    overflow: hidden; 
}

/* Właściwe skalowanie obrazka */
.aspect-ratio-box img {
    width: 100%;
    height: 100%;
    
    /* KLUCZ: Wypełnia kontener i przycina z góry/dołu lub boków */
    object-fit: cover; 
}

/* ======================================================= */
/* 4. POZOSTAŁE STYLE (Nawigacja i Kropki) */
/* ======================================================= */

/* Ukrywamy domyślny display: none, jeśli nie używasz już JS/HTML z tymi klasami. 
   Jeśli używasz HTML z tymi klasami, pozostaw te reguły. */
/* .mySlides {
  display: none;
} */

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  z-index: 10; /* Upewnij się, że są nad obrazami */
}
.logo_overlay {
    position: absolute;
    top: 2%;
    right: 2%;
    
    /* 2. KONTROLA WIELKOŚCI DLA DOLNEGO LOGO: */
    width: 10%;
    max-width: 150px;     /* Maksymalna wielkość */
    min-width: 50px;      /* Minimalna wielkość, aby było czytelne */
    
    border-radius: 0 3px 3px 0;
    z-index: 999;
}

/* Obrazek wewnątrz logo_overlay musi wypełniać swój kontener */
.logo_overlay img {
    width: 100%;
    height: auto;
}

.logo_overlay_bottom {
    position: absolute;
    bottom: 1%;
    left: 1%;
    
    /* 2. KONTROLA WIELKOŚCI DLA DOLNEGO LOGO: */
    width: 10%;
    max-width: 150px;     /* Maksymalna wielkość */
    min-width: 40px;      /* Minimalna wielkość, aby było czytelne */
    
    border-radius: 0 3px 3px 0;
    z-index: 999;
}

/* Obrazek wewnątrz logo_overlay_bottom musi wypełniać swój kontener */
.logo_overlay_bottom img {
    width: 100%;
    height: auto;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0
}