/* Style dla smartfonów (ekrany mniejsze niż 768px) */

/* Domyślnie ukrywamy elementy przeznaczone tylko dla komórek */
.mobile-only {
    display: none;
}


@media screen and (max-width: 767px) {
  .container {
    width: 100%;
    padding: 10px;
  }
  
  .menu {
    display: none; /* Np. ukrycie menu i pokazanie hamburgera */
  }
/* --- KOD PODSTAWOWY (Dla kontekstu - zakładam, że to już masz lub coś podobnego) --- */
/* To tylko po to, abyś wiedział, co zmieniamy. Nie musisz tego kopiować, jeśli już masz swoje style. */
img {
  max-width: 100%;
  height: auto;
}

/* --- MEDIA QUERY DLA SMARTFONÓW (Wklej to na końcu swojego pliku CSS) --- */
@media screen and (max-width: 767px) {
  
  /* 1. Kontenery - zmniejszamy marginesy, by wykorzystać całą szerokość ekranu */
  .container, .container-fluid {
    padding-left: 15px;
    padding-right: 15px;
    width: 100%; /* Upewniamy się, że kontener nie jest sztywny */
  }

  /* 2. Nawigacja - układamy elementy jeden pod drugim */
  nav.container-fluid {
    display: flex;
    flex-direction: column; /* Zmienia układ z poziomego na pionowy */
    align-items: center;    /* Centruje elementy */
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  nav ul {
    padding: 0;
    margin: 5px 0;
    list-style: none; /* Usuwa kropki, jeśli są */
  }
  
  nav ul li {
    margin-bottom: 10px; /* Odstęp między linkami */
  }

  /* 3. Nagłówki - zmniejszamy czcionkę, aby nie rozsadzała ekranu */
  h2 {
    font-size: 1.5rem; /* Mniejszy tytuł sekcji */
    line-height: 1.2;
    margin-top: 20px;
  }

  h3 {
    font-size: 1.1rem; /* Mniejszy podtytuł */
    margin-bottom: 15px;
  }

  /* 4. Obrazy - KLUCZOWE dla Twoich screenshotów */
  figure {
    margin: 0; /* Usuwamy domyślne marginesy przeglądarki */
    width: 100%;
    display: flex;
    flex-direction: column; /* Zdjęcia jedno pod drugim */
    gap: 15px; /* Odstęp między zdjęciami */
  }

  /* Klasa .img1 i .big, o których wspomniałeś w HTML */
  .img1, .big {
    width: 100%;       /* Rozciągnij zdjęcie na pełną szerokość telefonu */
    height: auto;      /* Zachowaj proporcje */
    border-radius: 4px; /* Opcjonalnie: lekko zaokrąglone rogi wyglądają nowocześniej */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Opcjonalnie: delikatny cień dla czytelności */
  }

  /* 5. Stopka */
  footer {
    text-align: center;
    padding: 20px 0;
    font-size: 0.8rem;
  }

/* Pokazujemy elementy mobilne */
    .mobile-only {
        display: block; /* lub inline-block */
    }

    /* Ukrywamy elementy desktopowe (to już dodaliśmy wcześniej) */
    .desktop-only {
        display: none !important;
    }

}

}

@media screen and (max-width: 767px) {
    /* ... Twoje poprzednie style tutaj ... */

    /* To ukryje obrazki 5, 6 i 7 na telefonie */
    .desktop-only {
        display: none !important;
    }
}