:root{
    /*groen*/
    --mat-groen: #A2C6AC;
    --licht-groen: #D2E3D7;
    --donker-groen: #4C806F;
    --tekst-groen: #044B38;
    --tekst-geel: #ffd140;
    /*geel*/
    --mat-geel: #FDDD78;
    --licht-geel: #F8EECC;
    --donker-geel: #FFD140;
}
.aw-kleur-groen{

}
.aw-kleur-geel{

}

.project-loop{
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
.loop-item-title-container{
    width: 100%;
    height: 200px;
    background-color: var(--tekst-groen);
    opacity: 0.5;
    z-index: 99;
}
.project-loop-item{
    width: 30%;
    height: auto;
    padding-top: 20px;
}
/* .loop-item-title{
    font-size: 22px;
    text-transform: capitalize;
    color: green;
}*/
.loop-item-title span{
    font-size: 20px;
    text-transform: uppercase !important;
    letter-spacing: 6px;
    color: var(--tekst-geel);
    z-index: 199;
    margin-left: 30px;
}
img.loop-img{
    width: 100%;
    max-height: 400px;
    object-fit: fill;
    margin-top: -50px;
}