body, html {
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden; /* Zapobieganie przewijaniu poziomemu */
    font-family: 'Poppins', sans-serif;
}

#main-content {
    width: 100%;
}

.fade-out {
    animation: fadeOut 0.5s forwards;
}

.fade-in {
    animation: fadeIn 0.5s forwards;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Reset dla całego layoutu */
body, html {
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden; /* Zapobiega przewijaniu poziomemu */
}

/* Ustawienia globalne dla siatek */
.grid {
    display: flex;
    flex-wrap: wrap; /* Zwijanie wierszy */
    justify-content: space-between; /* Równe odstępy między elementami */
    gap: 15px; /* Odstępy między elementami */
}

/* Elementy siatki */
.grid-item {
    flex: 0 0 calc(33.33% - 10px); /* Trzy elementy w rzędzie */
    max-width: calc(33.33% - 10px);
    box-sizing: border-box;
    padding: 10px;
}

/* Dostosowanie do iPad Air i podobnych urządzeń */
@media screen and (max-width: 1024px) {
    .grid-item {
        flex: 0 0 calc(50% - 10px); /* Dwa elementy w rzędzie */
        max-width: calc(50% - 10px);
    }

    .hero-section {
        padding: 20px; /* Dodanie odstępów wewnętrznych */
    }

    .hero-title {
        font-size: 2.5rem; /* Dostosowanie rozmiaru tekstu */
    }

    .hero-text {
        font-size: 1.3rem;
    }

    .hero-button {
        font-size: 0.9rem;
        padding: 8px 16px;
    }
}

/* Dostosowanie dla urządzeń mobilnych (poniżej 768px) */
@media screen and (max-width: 768px) {
    .grid-item {
        flex: 0 0 100%; /* Jedna kolumna */
        max-width: 100%;
    }

    .hero-section {
        padding: 15px;
        text-align: center; /* Wyśrodkowanie tekstu */
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-text {
        font-size: 1.1rem;
    }

    .hero-button {
        font-size: 0.8rem;
        padding: 6px 12px;
    }
}

/* Dostosowanie dla bardzo małych ekranów (poniżej 480px) */
@media screen and (max-width: 480px) {
    .grid {
        flex-direction: column; /* Kolumna */
        gap: 20px; /* Większe odstępy */
    }

    .grid-item {
        flex: 1 1 100%; /* Pełna szerokość */
        max-width: 100%;
    }

    .hero-title {
        font-size: 1.8rem;
    }

    .hero-text {
        font-size: 1rem;
    }

    .hero-button {
        font-size: 0.7rem;
        padding: 5px 10px;
    }
}