I have this html for a page that will be filled according to what facilities a hotel has. Obviously, some hotels have more than others but this is a template so I have to cater for all meaning I have to have more containing divs than is needed sometimes.
<div class="col-md-6 color-blue py-4 d-flex align-items-center flex-wrap facilities">
<div class="w-50 d-flex"><i class="material-icons align-middle">ac_unit</i> Air Conditioning</div>
<div class="w-50 d-flex"><i class="material-icons align-middle">accessible</i> Disabled Access</div>
<div class="w-50 d-flex"><i class="material-icons align-middle">restaurant</i> Restaurant</div>
<div class="w-50 d-flex"><i class="material-icons align-middle">pool</i> Pool</div>
<div class="w-50 d-flex"><i class="material-icons align-middle">child_care</i> Kids Activities</div>
<div class="w-50 d-flex"><i class="material-icons align-middle">access_time</i> 24 Hour Reception</div>
<div class="w-50 d-flex"><i class="material-icons align-middle">fitness_center</i> Gym</div>
<div class="w-50 d-flex"><i class="material-icons align-middle">wifi</i> Internet</div>
<div class="w-50 d-flex"><i class="material-icons align-middle">person_outline</i> Concierge</div>
<div class="w-50 d-flex"><i class="material-icons align-middle">spa</i> Sauna</div>
<div class="w-50 d-flex"><i class="material-icons align-middle">room_service</i> Room Service</div>
<div class="w-50 d-flex"><i class="material-icons align-middle"></i> </div>
<div class="w-50 d-flex"><i class="material-icons align-middle"></i> </div>
<div class="w-50 d-flex"><i class="material-icons align-middle"></i> </div>
</div>
So the pseudo code would be: If the i element is :empty, the parent div will display: none.
I'm having trouble doing this with Less and can't seem to get it working. Any help would be appreciated.