.content {
    display: flex;
    justify-content: center;
}

.infotekst {
    height: auto;
    width: 85%;
}

.categorieen {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 15%;
    gap: 30px;
    margin-top: 25px;
}

.categorie-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.informatie {
    display: flex;
    /* width: 65%; */
    flex-direction: row;
    gap: 50px;
    align-items: flex-start;
}

.categorie-item p {
    color: var(--titles);
    font-weight: 700;
}

.content {
    gap: 50px;
}

.werk {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    gap: clamp(10px, 1vw, 20px);
}

.werk img {
    image-rendering: auto;
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.informatie p {
    margin-top: 2px;
    margin-bottom: 7px;
}

.portimgbanner {
    width: 100%;
    height: 41.44vw;;
}

.portimg2-1 {
    width: 49%;
    height: auto;
}

.portimg3-1 {
    width: 66.25%;
    height: 20vw;
}

.portimg1-2 {
    width: 100%;
    height: 20vw;
}

.portimg3-2 {
    width: 32%;
    height: 20vw;
}

.portimg1-1 {
    width: 49%;
    height: 20vw;
}

.portvid1-1 {
    width: 100%;
}

.portimgposter {
    width: 49%;
    height: 40.89vw;
}

.portimgweb {
    width: 100%;
    height: 36.72vw;
}

.portvidmobile {
    width: 22%;
    height: 28.65vw;
}

.portimgmoblie {
    width: 75%;
    height: 28.65vw;
}

.main img,
iframe,
video {
    image-rendering: auto;
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

video {
    object-position: top;
}

h6 {
    color: #6f6f6f;
}

/*------------------------------------------------------Tablet------------------------------------------------------ */
@media (max-width: 1199px) {
    .informatie {
        flex-direction: column-reverse;
        gap: 25px;
    }

    .categorieen {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        gap: 5px;
        margin-top: 0;
    }

    .infotekst {
        width: 100%;
    }

    .portimg1-1 {
        width: 48.89%;
        height: 324px;
    }

    .portimg3-1 {
        width: 100%;
        height: 384px;
    }

    .portimg3-2 {
        width: 48.89%;
        height: 435px;
    }

    .portimgbanner {
        height: 595.719px;
    }

    .portvidmobile {
        width: 25%;
        height: 500px;
    }

    .portimgmoblie {
        width: 72.75%;
        height: 500px;
    }
}


/*------------------------------------------------------Mobile------------------------------------------------------ */
@media (max-width: 768px) {
    .informatie {
        flex-direction: column-reverse;
    }

    .categorieen {
        flex-direction: column;
    }

    .categorie-item {
        flex-direction: row;
        gap: 5px;
    }

    .werk {
        flex-wrap: nowrap;
        flex-direction: column;
        gap: 15px;
    }

    .portimg1-1 {
        width: 100%;
        height: 216px;
    }

    .portvid1-1 {
        width: 100%;
        height: 216px;
    }

    .portimg1-2 {
        width: 100%;
        height: 192px;
    }

    .portimg3-2 {
        width: 100%;
        height: 362.5px;
    }

    .portimg3-1 {
        width: 100%;
        height: 192px;
    }

    .portimgbanner {
        width: 100%;
        height: 295.719px;
    }

    .portvidmobile {
        width: 100%;
        height: auto;
    }

    .portimgmoblie {
        width: 100%;
        height: 216px;
    }
}