[SOLVED] How to remove black line at the bottom of images

Links to webpage and sceenshot at bottom of post

I am re-building a webpage with the plugin WP-bakery. The original webpage does not have any problems. When I try to use the same CSS with the new webpage, there are black lines at the bottom of the images. These images are hyperlinks to other pages, but the black lines do not form under the text, but under the image where the text is on. I tested this by adding a new border to the hyperlinks and a new line showed up under the text, so that is not the problem. I think it has to do with the margin and paddings that are not correct, but I do not know where it goes wrong. Here is the CSS file I used on both websites:

.entry-content a img, 
.entry-content a, 
.entry-content a img:hover, 
.entry-content a:hover {
    box-shadow:none;
}

.header-sticky-hide, #colophon, #masthead {display:none !important;}

#content {margin:0;padding:0;}

.keuze-txt   {  margin-top: -75%;
    text-shadow: 3px 3px 4px rgba(0,0,0,0.35);
    font-weight: 700;
    color: #fff!important;
    position: absolute;
    z-index: 99;
    text-align: center;
}

.keuze-txt  p {
    width: 75%;
    margin: 0 auto;
}

.keuze-txt a, 
.keuze-txt strong {
    color:#fff !important;
}

.keuze-txt a {
    line-height:100px;
    padding:10px 15px;
    color:#fff;
}

.kraam .keuze-txt a {
    background:#b8ccea 
}

.ack .keuze-txt a {
    background:#ecc8cd  
}

.baker .keuze-txt a {
    background: #ffbe9f  
}

.keuze-txt em {
    font-size: 0.5em;
    font-style: normal;
}

.keuze-img {   
    margin-top: -130%;
    margin-bottom: 0;
    position: absolute;
    z-index: 999;
    margin-left: 33%;
    border: transparent;
}

.keuze-bg {
    max-height: 100vh;
}

.keuze-bg {
    max-height: 100vh;
}

.keuze-bg img{
    opacity:0.3;
}

.keuze-col:hover .keuze-bg img{
 opacity:1;   
}

@media screen and (max-width: 768px) {
    .keuze-img {
        margin-top: -160%;
        margin-left: 25%;
    }

    .keuze-txt {
        margin-top: -90%;
    }

    .keuze-txt p {
        width:90%;
    }
}

This is the HTML:

[vc_row full_width="stretch_row_content_no_spaces" full_height="yes" css=".vc_custom_1600777042471{background-position: 0 0 !important;background-repeat: repeat !important;}"]
[vc_column width="1/3" el_class="keuze-col kraam" css=".vc_custom_1600778593155{padding-top: 0px !important;padding-bottom: 0px !important;background-color: #b8ccea !important;}"]
[vc_single_image image="1208" img_size="full" alignment="center" onclick="custom_link" link="https://www.kraamenco.nl/" el_class="keuze-bg" css=".vc_custom_1600778060038{padding-top: 0px !important;padding-right: 0px !important;padding-bottom: 0px !important;padding-left: 0px !important;}"]
[vc_single_image image="1225" img_size="large" alignment="center" onclick="custom_link" link="https://www.kraamenco.nl/" el_class="keuze-img" css=".vc_custom_1600777981827{padding-top: 0px !important;padding-right: 0px !important;padding-bottom: 0px !important;padding-left: 0px !important;}"]
[vc_column_text el_class="keuze-txt"]



Kraam & Co staat voor professionaliteit, betrouwbaarheid en jarenlange ervaring op het gebied van kraamzorg in Abcoude en omstreken.


Ga naar Kraam & Co »

[/vc_column_text][/vc_column][vc_column width="1/3" el_class="keuze-col ack" css=".vc_custom_1600778027984{padding-top: 0px !important;padding-bottom: 0px !important;background-color: #ecc8cd !important;}"]
[vc_single_image image="1209" img_size="full" alignment="center" onclick="custom_link" link="https://www.zorgmaat.nl/home/" el_class="keuze-bg"]
[vc_single_image image="1214" img_size="large" alignment="center" onclick="custom_link" link="https://www.zorgmaat.nl/home/" el_class="keuze-img"]
[vc_column_text el_class="keuze-txt"]


Elke baby is uniek, geen bevalling is gelijk. De kraamverzorgenden van Ack Zorgmaat Kraamzorg zijn erin gespecialiseerd om een kraamtijd tot een heerlijk begin te maken van de nieuwe fase in uw leven.

Ga naar Ack Zorgmaat Kraamzorg »

[/vc_column_text][/vc_column][vc_column width="1/3" el_class="keuze-col baker" css=".vc_custom_1600778043514{padding-top: 0px !important;padding-bottom: 0px !important;background-color: #ffbe9f !important;}"]
[vc_single_image image="1210" img_size="full" alignment="center" onclick="custom_link" link="https://www.debaker.nl/home" el_class="keuze-bg"]
[vc_single_image image="1228" img_size="full" alignment="center" onclick="custom_link" link="https://www.debaker.nl/home" el_class="keuze-img"]
[vc_column_text el_class="keuze-txt"]


Met ruim 30 jaar ervaring in de kraamzorg weten we waar we het over hebben. Van degene die het intakegesprek met je voert tot aan ons management: kraamzorg zit in onze genen.

Ga naar De Baker Kraamzorg »

[/vc_column_text][/vc_column][/vc_row]

Where could the problem originate from? I have spend 3 hours looking at it and rebuild the page many times, but I am unable to find the problem.
Links
Webpage that is working properly:
https://www.zorgmaat.nl/

Screenshot of error

Fixed

Added this to custom CSS in WP-bakery and the problem seems gone now.


.colors-custom .entry-content a, .colors-custom .entry-summary a, .colors-custom .comment-content a, .colors-custom .widget a, .colors-custom .site-footer .widget-area a, .colors-custom .posts-navigation a, .colors-custom .widget_authors a strong { -webkit-box-shadow: none; box-shadow: none; }