.prdContainer.grid {
    display:                grid;
    grid-template-columns:  repeat(5, 1fr);
    grid-template-rows:     max-content 36px max-content auto;
    grid-template-areas:
                            "prdPromo   prdPromo    prdPromo    prdPromo    prdPromo"
                            "prdHeader  prdHeader   prdHeader   prdHeader   prdHeader"
                            "prdImg     prdImg      prdImg      prdImg      prdImg"
                            "prdFooter  prdFooter   prdFooter   prdFooter   prdFooter";
    justify-content:        center;
    border-bottom:          1px solid var(--colorLightGray);  
    border-right:           1px solid var(--colorLightGray);
    box-sizing:             border-box; 
    height:                 max-content;
    padding:                5px;
    height:                 100%;
}

.prdContainer.grid .prdHeader{
    grid-template-columns:  auto;
}

.prdContainer.grid .prdHeader .prdTitle {
    max-height:             36px;
    font-size:              12px;
    font-weight:            700;
    overflow:               hidden;
    line-height:            18px;
    padding:                0;
}

.prdContainer.grid .prdHeader .wlheartAmount, .prdContainer.grid .prdHeader .wlheart{
    display:                none;
} 

.prdContainer.grid .prdSpecs{
    display:                none;
}
.prdContainer.grid .prdSubheader{
    display:                none;
}
.prdContainer.grid .prdProductinfolink{
    display:                none;
}
.prdContainer.grid .prsWishlist{
    display:                none;
}

.prdContainer.grid .prdImg img {
    max-width:      100%;
}

/* FOOTER */
.prdContainer.grid .prdFooter {
    grid-area:              prdFooter;
    display:                grid;
    grid-template-columns:  repeat(8, 1fr);
    grid-template-rows:     auto 40px;
    grid-template-areas: 
                            "prdEnergielabel    prdEnergielabel prdEnergielabel prdPricer       prdPricer       prdPricer       prdPricer               prdPricer"
                            "prdVergelijk       prdVergelijk    prdVergelijk    prdVergelijk    prdVergelijk    prdVergelijk    footerWlheartAmount     footerWlheart";
    user-select:            none;
    -webkit-user-select:    none;
    column-gap:             0px;
    height:                 100%;
    margin-top:             0;
}

.prdContainer.grid .prdFooter .wlheart{
    grid-area:              footerWlheart;
    display:                inline-flex;
    align-self:             center;
    justify-self:           center;
}
.prdContainer.grid .prdFooter .wlheartAmount{
    grid-area:              footerWlheartAmount;
    display:                inline-flex;
    align-self:             center;
    font-size:              11px;
    color:                  #999;
    justify-self:           end;
}

.prdContainer.grid .prdSpacerHorizontal{
    display:                none;
}

.prdContainer.grid .prdFooter .prdEnergielabel { 
    align-self:             flex-end;
}

.prdContainer.grid .prdFooter .prdEnergielabel > div {
    justify-content:        flex-start;
}

/* pricer css */
.prdContainer.grid .prdFooter .prdVergelijk { 
    width:                  auto;
}

.prdContainer.grid .prdFooter .prdWishlist {
    grid-area:              prdWishlist;
    justify-self:           center;
    align-self:             center;
}

.prdContainer.grid .prsContainer{ 
    grid-template-columns:  repeat(4,auto);
    /* line-height: normal; */
    column-gap:             0px;
}

.prdContainer.grid .prdPricer.pricerFooter{
    align-self:             flex-end;
    margin-top:             5px;
}

@media screen and (max-width: 400px) {
    .prdContainer.grid .prdFooter {
        grid-template-rows:     auto 40px 40px;
        grid-template-areas: 
                                "prdEnergielabel        prdEnergielabel     prdPricer       prdPricer               prdPricer       prdPricer       prdPricer               prdPricer"
                                "prdVergelijk           prdVergelijk        prdVergelijk    prdVergelijk            prdVergelijk    prdVergelijk    prdVergelijk            prdVergelijk"
                                "footerWlheart          footerWlheartAmount .               .                       .               .               .                       .";
        column-gap:             3px;
    }
}