<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wycentrowana i responsywna strona</title>
    <style>
        /* Resetowanie domyślnych stylów */
        html, body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Kontener strony */
        .container {
            max-width: 1600px; /* Maksymalna szerokość strony */
            margin: 0 auto; /* Wyśrodkowanie kontenera */
            padding: 0 20px; /* Wewnętrzne odstępy */
            text-align: center; /* Wyśrodkowanie tekstu */
        }

        /* Obrazy */
        img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 20px auto; /* Wyśrodkowanie obrazu */
        }

        /* Dodatkowe style dla nagłówków i akapitów */
        h1, p {
            margin: 20px 0;
        }

        /* ======= Reguły medialne ======= */

        /* 1. Ekrany do 1200px */
        @media (max-width: 1200px) {
            .container {
                max-width: 100%; /* Dostosowanie do węższych ekranów */
                padding: 0 15px; /* Zmniejszenie wewnętrznych odstępów */
            }

            h1 {
                font-size: 2rem; /* Zmniejszenie wielkości nagłówków */
            }
        }

        /* 2. Ekrany do 768px (tablety) */
        @media (max-width: 768px) {
            .container {
                padding: 0 10px; /* Jeszcze mniejsze odstępy */
            }

            h1 {
                font-size: 1.8rem; /* Dostosowanie nagłówków */
            }

            p {
                font-size: 1rem; /* Dostosowanie tekstu */
            }
        }

        /* 3. Ekrany do 480px (telefony) */
        @media (max-width: 480px) {
            h1 {
                font-size: 1.5rem; /* Mniejsze nagłówki na małych ekranach */
            }

            p {
                font-size: 0.9rem; /* Dostosowanie tekstu */
            }

            img {
                margin: 10px auto; /* Mniejsze odstępy między obrazami */
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Wycentrowana i responsywna strona</h1>
        <p>Ta strona automatycznie dostosowuje się do różnych szerokości ekranu.</p>
        <img src="example.jpg" alt="Przykładowy obraz">
    </div>
</body>
</html>
.description {
    max-width: unset !important;
}
