/* Container voor bos + flipkaart */
.bosblok {
    position: relative;
    width: 100%;
    max-width: 700px;      /* <<< past binnen jouw contentkader */
    margin: 40px auto;     /* centreert binnen de pagina */
}

/* Bosafbeelding links */
.bos-afbeelding {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* Flipkaart in linker onderhoek van het bos */
.flipkaart {
    position: absolute;
    bottom: 2%;
    left: 2%;
    width: 60%;              /* <<< 50% groter dan voorheen */
    aspect-ratio: 3 / 2;
    perspective: 2000px;
}


/* Binnenkant van de flipkaart */
.flip-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1.2s ease;
    transform-origin: left bottom;   /* <<< opent vanuit linker onderhoek */
}

/* Flip naar links */
.flipkaart:hover .flip-inner {
    transform: rotateY(180deg);
}

/* Afbeeldingen */
.flip-inner img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    backface-visibility: hidden;
}

.achter {
    transform: rotateY(180deg);
}

/* Responsive gedrag */
@media (max-width: 900px) {
    .flipkaart {
        width: 70%;   /* iets groter op tablet */
    }
}

@media (max-width: 600px) {
    .flipkaart {
        width: 80%;   /* nog iets groter op mobiel */
    }
}