@media (max-width: 600px) {
    html, body {
        font-size: 15px;
        overflow-x: hidden;
    }
   .nav__hamburger {
        display: grid;
    }
    .nav {
        grid-template-columns: auto 1fr auto;
        
    }
    .nav__link {
        display: none;
    }
    .nav__logo {
        margin: 0 auto;
        width: 100%;
    }

    .foto1 {
        height: 120px;
    }
    .foto1__title {
        font-size: 1.1rem;
        letter-spacing: 1px;
        white-space: normal;
    }

    .rondjes-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.6rem;
        padding: 0 0.2rem;
        margin: 1rem auto 1.2rem auto;
        max-width: 100%;
    }
    .rondje__circle {
        width: 44px;
        height: 44px;
        margin-bottom: 0.3rem;
    }
    .rondje__title {
        font-size: 0.77rem;
        margin-top: 0.1rem;
    }

    .foto2 {
        margin: 1rem 0 0.3rem 0;
    }
    .foto2__titel {
        margin-top: 1.7rem;
        font-size: 1rem;
        padding-left: 9%;
    }
    .foto2__paragraaf {
        font-size: 0.5rem;
        max-width: 60vw;
    }

    .foto3 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        max-width: 100vw;
        margin: 0.8rem auto 0.7rem auto;
        padding: 0 0.1rem;
    }
    .foto3__links {
        width: 35vw;
        display: grid;
        justify-content: flex-end;
        align-items: flex-start;
    }
    .foto3__img-links {
        width: 110px;
        height: 120px;
        border-radius: 10px;
        margin-right: 11%;
        object-fit: cover;
        margin-top: -76%;
        margin-bottom: 26%;
        margin-left: 4%;
    }
    .foto3__rechts {
        width: 60vw;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: flex-start;
    }
    .foto3__thumbnails {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(39px, 1fr));
        gap: 0.3rem;
        align-items: flex-start;
    }
    .foto3__thumb {
        width: 46px;
        height: 35px;
        border-radius: 4px;
        border-width: 1px;
        margin-left: 0;
        object-fit: cover;
    }

    .foto4 {
        margin: 1rem auto 1.4rem auto;
        padding: 0 0.1rem;
    }
    .foto4__container {
        max-width: 99vw;
        min-height: 110px;
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
    }
    .foto4__img {
        max-width: 99vw;
        height: 110px;
        border-radius: 10px;
        border-width: 2px;
    }

    .foto4__tekstvak {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 5px;
        padding: 0.15rem 0.3rem;
        min-width: 55px;
        max-width: 85px;
        font-size: 0.65rem;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        border: 1.5px solid #fff;
        text-align: left;
        z-index: 2;
    }
    .foto4__tekstvak-titel {
        font-size: 0.55rem;
        margin-bottom: 0.1rem;
        color: #222;
    }
    .foto4__tekstvak-tekst {
        font-size: 0.55rem;
        line-height: 1.2;
        color: #444;
    }

    .galerij__titel {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }
    .galerij {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.3rem;
        max-width: 99vw;
        margin: 0 auto 1.1rem auto;
        padding: 0 0.1rem;
    }
    .galerij__item {
        border-radius: 6px;
        aspect-ratio: 4/3;
        min-width: 0;
    }
    .galerij__img {
        border-radius: 0px;
    }
    .galerij__tekst {
        font-size: 0.77rem;
        padding: 0.3rem 0.5rem;
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
    }

    .openingsuren {
        max-width: 97vw;
        padding: 0.7rem 0.3rem 0.7rem 0.3rem;
        margin: 0.7rem auto 1.1rem auto;
        border-radius: 10px;
    }
    .openingsuren__title {
        font-size: 1.05rem;
        margin-bottom: 0.1rem;
    }
    .openingsuren__subtitle {
        font-size: 0.9rem;
        margin-bottom: 0.6rem;
    }
    .openingsuren__tijden {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.2rem;
        margin-bottom: 0.5rem;
    }
    .openingsuren__tijden-links,
    .openingsuren__tijden-rechts {
        font-size: 0.93rem;
        min-width: 0;
        padding: 0.2rem 0.3rem;
        border-radius: 5px;
    }
    .openingsuren__tijd {
        font-size: 0.93rem;
        margin-top: 0.06rem;
    }
    .openingsuren__kanaal {
        margin: 0.3rem 0 0.2rem 0;
        font-size: 0.93rem;
    }

    .footer {
        padding: 0.9rem 0 0.3rem 0;
        margin-top: 0.7rem;
    }
    .footer__container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(22px, 1fr));
        align-items: center;
        justify-content: flex-start;
        gap: 0.4rem;
        max-width: 99vw;
    }
    .footer__logo-wrap {
        min-width: 22px;
        margin-right: 0.15rem;
    }
    .footer__logo {
        width: 21px;
        height: 21px;
        border-radius: 6px;
        padding: 1px;
        margin-left: 37%;
    }
    .footer__divider, .footer__divider--small {
        width: 1px;
        height: 24px;
        background: #fff;
        opacity: 0.13;
        margin: 0 0.3rem 0 0.3rem;
        display: block;
    }
    .footer__galerij {
        gap: 0.2rem;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
        align-items: center;
        width: auto;
    }
    .footer__heading {
        font-size: 0.7rem;
        margin-bottom: 0;
        margin-right: 0.3rem;
    }
    .footer__rondjes {
        gap: 0.13rem;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(15px, 1fr));
        align-items: center;
    }
    .footer__rondje {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        border-width: 1px;
        margin: 0;
    }
    .footer__rondje img {
        width: 100%;
        height: 100%;
    }
    .footer__copyright {
        font-size: 0.63rem;
        margin-left: -48%;
        margin-top: 0;
        white-space: nowrap;
    }
}