/* GOLDEN RATIO */

.g-parent {
    max-width: 800px;
    max-height: auto;
    margin: 0 auto;
    padding: 10px;

    /*     
    display: flex;
    flex-direction: row;
    align-items: center; */

}

.g-child-21-left {
    float: left;
    width: 61.8%;
    height: 100%;
    /* Behoudt de volledige hoogte */
    /* overflow: hidden; */
    /* Geen directe scroll hier */
    /* background-color: #B0D3C7; */
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.g-child-content {
    flex-grow: 1;
    /* Zorgt ervoor dat de container groeit tot max hoogte */
    /* overflow: auto; */
    /* Hier zit de scroll */
    padding-bottom: 10px;
    /* Extra ruimte onderaan */
}




.g-child-13-8-right {
    float: right;
    width: 38.2%;
    height: 100%;
}



.g-child-8-5-right-top {
    height: 38.2%;
    overflow: hidden;

}

.g-child-13-right-bottom {
    width: 100%;
    height: 61.8%;
    overflow: hidden;

}


/* left 21 */

.g-child-13-left {
    float: left;
    width: 38.2%;
    height: 100%;
    /* Behoudt de volledige hoogte */
    overflow: hidden;
    /* Geen directe scroll hier */
    background-color: #B0D3C7;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.g-child-21-right {
    float: right;
    width: 61.8%;
    height: 100%;
    /* Behoudt de volledige hoogte */
    overflow: hidden;
    /* Geen directe scroll hier */
    /* background-color: #B0D3C7; */
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.g-child-13-8-left {
    float: left;
    width: 38.2%;
    height: 100%;
}



.g-child-8-5-left-top {
    height: 38.2%;
    overflow: hidden;
    /* background-color: #ff5722 */
}

.g-child-13-left-bottom {
    width: 100%;
    min-height: 278px;
    height: 61.8%;
    overflow: hidden;
    /* background-color: #ffc107 */
}

@media (max-width:768px) {

    .g-parent {
        max-width: 768px !important;
        /* max-height: 768px !important; */
        width: 100% !important;
        /* height: 768px !important; */
        margin: 0 auto;

        /*     
        display: flex;
        flex-direction: row;
        align-items: center; */

    }

    .g-child-21-left {
        float: left;
        width: 100%;
        height: 100%;
        /* Behoudt de volledige hoogte */
        overflow: hidden;
        /* Geen directe scroll hier */
        /* background-color: #d3e9f863; */
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
    }



    .g-child-13-8-right {
        float: left;
        width: 100%;
        height: 100%;
    }

    .g-child-8-5-right-top {
        float: right;
        width: 38.2%;
        overflow: hidden;
        /* background-color: #d3e9f8 */
    }

    .g-child-13-right-bottom {
        float: left;
        width: 61.8%;
        height: 61.8%;
        overflow: hidden;
        /* background-color: #d3e9f8 */
    }
}


@media (max-width:600px) {
    .g-parent {
        max-width: 600px !important;
        /* max-height: 600px !important; */
        width: 100% !important;
        /* height: 768px !important; */
        margin: 0 auto;

        /*     
        display: flex;
        flex-direction: row;
        align-items: center; */

    }

    .g-child-21-left {
        float: left;
        width: 100%;
        height: 100%;
        /* Behoudt de volledige hoogte */
        overflow: hidden;
        /* Geen directe scroll hier */
        /* background-color: #d3e9f88b; */
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
    }



    .g-child-13-8-right {

        width: 100%;
        height: 100%;
    }

    .g-child-8-5-right-top {

        width: 100%;
        overflow: hidden;
        /* background-color: #d3e9f8 */
    }

    .g-child-13-right-bottom {

        width: 100%;
        height: 61.8%;
        overflow: hidden;
        /* background-color: #d3e9f8 */
    }
}



.article-body.g-child-8-5-right-top {
    display: flex;
    justify-content: center;
}

.w3-card-4-g {
    width: calc(100% - 32px);
    /* Houd rekening met de marge */
    margin: 16px;
    /* Zorgt ervoor dat de hele kaart een marge krijgt */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19) */
}

.w3-card-4-g img {
    width: 100% !important;
    /* Zorgt ervoor dat de afbeelding de volledige breedte van de kaart gebruikt */
    height: auto !important;
    object-fit: contain !important;
    /* Zorgt ervoor dat de afbeelding niet vervormt */
}

.w3-card-4-g-2 {
    width: calc(100% - 32px);
    /* Houd rekening met de marge */
    margin: 16px;
    /* Zorgt ervoor dat de hele kaart een marge krijgt */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #ffffff;
    /* box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19) */
}

/* 2 */


.g-child-2-b {
    height: 61.8%;
    overflow: hidden;
    background-color: #ff5722
}

.g-child-2-o {
    width: 100%;
    height: 38.2%;
    overflow: hidden;
    background-color: #ffc107
}

/* gulden rechts */
.g-child-rechts {
    float: right;
    width: 61.8%;
    height: 100%;
    overflow: scroll;
    background-color: #B0D3C7
}

.g-child-2-rechts {
    float: left;
    width: 38.2%;
    height: 100%;
}

.article-body.g-child-2-o {
    display: flex;
    justify-content: center;
}