/* Ustawienie głównego kontenera strony */
.container {
    max-width: 90%; /* Szerokość kontenera wynosi 90% szerokości okna */
    margin: 0 auto; /* Automatyczne wyśrodkowanie kontenera */
    padding: 20px; /* Dodanie odstępów wewnętrznych */
    box-sizing: border-box; /* Uwzględnia padding w szerokości kontenera */
}

/* Styl dla jednej kolumny */
.single-column {
    background-color: #f9f9f9; /* Jasnoszare tło dla kontrastu */
    padding: 20px; /* Odstępy wewnętrzne */
    margin-bottom: 20px; /* Odstęp poniżej kolumny */
    border: 1px solid #ddd; /* Cienka, jasna ramka */
    border-radius: 5px; /* Zaokrąglenie rogów kolumny */
}

/* Styl dla sekcji z dwoma kolumnami */
.two-columns {
    display: grid; /* Użycie Grid Layout do ułożenia kolumn */
    grid-template-columns: 1fr 1fr; /* Dwie równe kolumny (każda zajmuje 1 jednostkę frakcji) */
    gap: 20px; /* Odstęp między kolumnami */
    margin-bottom: 20px; /* Odstęp poniżej sekcji */
}

/* Styl dla każdej kolumny w układzie dwukolumnowym */
.column {
    background-color: #f1f1f1; /* Jasnoszare tło dla kolumny */
    padding: 20px; /* Odstępy wewnętrzne */
    border: 1px solid #ddd; /* Cienka ramka wokół kolumny */
    border-radius: 5px; /* Zaokrąglenie rogów kolumny */
}

/* Styl dla małych ekranów */
@media (max-width: 768px) { /* Media Query: Dla ekranów o szerokości maksymalnej 768px */
    .two-columns {
        grid-template-columns: 1fr; /* Na małych ekranach kolumny układają się w jeden wiersz */
    }
}