<section class="lenders greybg" id="lenders">
<div class="container lendermodule">
<div class="row flex">
 <div class="lenderintro">
    <h2 class="white lendertitle"></h2>
    <div class="sm-text white"></div>
 </div>
 <div class="lenderwrapper flex">
   {% for item in module.why_rf %}
    <div class="lender">
       <div class="lendericon">
        <a href="">
        <img src="" class="icon">
     </a> </div>
    </div>
   {% endfor %} 
 </div>
</div>
</div>
</section>

.lenders {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.lendermodule {
    width: 100%;
    margin: 0 auto;
}

.flex {
    display: flex;
}

.lenderintro {
    width: 33%;
}

.lenderintro h2 {
    color: #fff;
    font-weight: 600;
    letter-spacing: 2px;
    font-size: 24px;
}

.lenderintro .sm-text {
    width: 80%;
    color: #fff;
    font-size: 14px;
}

.lenderwrapper.flex {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    box-sizing: border-box;
    width: 66%;
    margin: 0 auto;
    align-items: baseline;
    justify-content: flex-start;
    flex-direction: row;
    align-content: space-between;
}

.lender {
    width: calc(25% - 20px);
}

.lender .icon {
    max-height: 52px;
}