.categorien-blokken-holder{
    --gap: 12px;
}
.categorien-blokken-holder .categorie-blok{
    width: calc(50% - var(--gap));
    --height: 47vh;
    overflow: hidden;
    position: relative;
    float: left;
    margin-right: var(--gap);
    margin-bottom: var(--gap);
}
.categorien-blokken-holder .categorie-blok:nth-of-type(1){
    height: var(--height);
}
.categorien-blokken-holder .categorie-blok:nth-of-type(2){
    height: calc(var(--height)/2 - var(--gap));
}
.categorien-blokken-holder .categorie-blok:nth-of-type(3),
.categorien-blokken-holder .categorie-blok:nth-of-type(4){
    width: calc(25% - var(--gap));
    height: calc(var(--height) / 2);
}
.categorien-blokken-holder .categorie-blok .categorie-blok-content{
    display: flex;
    height: 100%;
    width: 100%;
    position: relative;
    align-items: center;
    flex-direction: row;
    justify-content: center;
}
.categorien-blokken-holder .categorie-blok .categorie-blok-content .title{
    color: white;
    z-index: 1;
    letter-spacing: 0.7px;
    font-weight: 300;
}
.categorien-blokken-holder .categorie-blok .categorie-blok-content .imageHolder{position: absolute;z-index: 0;}
.categorien-blokken-holder .categorie-blok .categorie-blok-content .imageHolder img{}
.categorien-blokken-holder .categorie-blok .categorie-blok-content .imageHolder::after{
    content:'';
    position:absolute;
    top:0;
    width:100%;
    height:100%;
    background-color:#00000054;
}

@media screen and (max-width:500px){
    .categorien-blokken-holder .categorie-blok.full{
        width:calc(100% - 30px);        
        --height: calc(100dvw - 30px);
        margin:0 15px;
    }
    .categorien-blokken-holder .categorie-blok:not(.full){
        width:calc(50% - 30px);        
        --height: calc(50dvw - 30px);
        margin:0 15px;
    }
}