/* 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 */
}

/* Bannery video */
.banner video {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px auto; /* Wyśrodkowanie jak dla obrazków */
    border-radius: 10px; /* opcjonalnie zaokrąglenie rogów */
}

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

/* Wyłącz limit szerokości w opisie */
.description {
    max-width: unset !important;
}

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

/* 1. Ekrany do 1200px */
@media (max-width: 1200px) {
    .container {
        max-width: 100%;
        padding: 0 15px;
    }

    h1 {
        font-size: 2rem;
    }
}

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

    h1 {
        font-size: 1.8rem;
    }

    p {
        font-size: 1rem;
    }
}

/* 3. Ekrany do 480px (telefony) */
@media (max-width: 480px) {
    h1 {
        font-size: 1.5rem;
    }

    p {
        font-size: 0.9rem;
    }

    img {
        margin: 10px auto;
    }
}