/* css/media.css */

/* --- TABLET (tot 992px) --- */
@media (max-width: 992px) {
    .checkerboard,
    .checkerboard.reverse {
        flex-direction: column; /* Stapel de kolommen */
        height: auto; /* Laat hoogte vrij op tablet/mobiel */
    }

    .checkerboard__image {
        min-height: 400px; /* Geef de afbeelding een vaste hoogte */
        width: 100%;
    }

    .checkerboard__text {
        padding: 3rem;
        text-align: center;
        width:100%;
    }

    .footer-grid {
        grid-template-columns: 1fr; /* Footer kolommen onder elkaar */
        text-align: center;
    }

    .separator-img {
        max-width: 80vw;
    }
}

/* --- MOBIEL (tot 768px) --- */
@media (max-width: 768px) {
    html {
        font-size: 15px; /* Iets kleinere basis-tekstgrootte */
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .intro {
        padding: 4rem 0;
    }

    .intro h2 {
        font-size: 2rem;
    }

    .checkerboard__image {
        min-height: 300px; /* Kleinere hoogte op mobiel */
    }

    .checkerboard__text {
        padding: 2rem; /* Minder padding op mobiel */
    }
}