<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-family: "Arial";
}
a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}
a:link {
  color: #000;
}

/* visited link */
a:visited {
  color: #000;
}

/* mouse over link */
a:hover {
  color: #000;
}

/* selected link */
a:active {
  color: #000;
}
.grid-containerx {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'main main main main main main'
    'footer footer footer footer footer footer';
  grid-gap: 0px;
  padding: 0px;
    background-color: #fff;

}
.grid-containerx > div {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 0 0;
  font-size: 30px;
}
.grid-container {
  display: grid;
  grid-template-columns: auto auto;
  font-family: "Arial";
  max-width:700px;

  padding: 0px;
      margin: auto;

}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
margin:20px;
border-radius: 15px;
  font-size: 30px;
}
.grid-container1 {
  display: grid;
  grid-template-columns: auto;
  background-color: #fff;
  padding: 0px;
}
.grid-item1 {
  background-color: rgba(255, 255, 255, 0.8);
  border: 0px solid rgba(0, 0, 0, 0.8);
  padding: 0px;
  font-size: 0.5em;
  text-align: left;
}
.grid-container2 {
  display: grid;
  grid-template-columns: auto auto;
  background-color: #ffe;
  padding: 0px;
}
.grid-item2 {
  background-color: rgba(255, 255, 255, 0.8);

  text-align: left;
}
.image {
  width:25.5em;
  height:25.5em;
    object-fit:cover;
border-radius: 5px 5px 0 0;

}
.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 40%;
  border-radius: 5px;
}

.bcon {
  padding: 8px;
}
.bconl {
  text-align: right;
  font-weight: normal !important;
}
.bcon1 {
  padding: 8px 8px 28px 8px;
  font-weight: bold;

}
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.img {
  border-radius: 5px 5px 0 0;
}
.item1 { grid-area: header; }
.item3 { grid-area: main; }
.item5 { grid-area: footer; }


</style>
</head>
<body>

<div class="grid-containerx">
  <div class="item1">Header</div>
   <div class="item3">

<div class="grid-container">
  @if($urgent_ads->count() > 0)
     
                        @foreach($urgent_ads as $ad)
                                                                        <a href="{{ route('single_ad', $ad->slug) }}">

                        <div class="grid-item"><div class="grid-container1">  <div class="grid-item1">                         <img itemprop="image"  src="{{ media_url($ad->feature_img) }}" class="image" alt=""></div>
  <div class="grid-item1 bcon">{{ $ad->title }} </div>  
  <div class="grid-item1 bcon1" > <div class="grid-container2"> <div class="grid-item2">{{ themeqx_price_ng($ad) }}</div>
  <div class="grid-item2 bconl">                                            @if($ad->purpose)
                                              
                                                    {{ $ad->purpose }}
                                            
                                            @endif
 </div></div> </div></div></div></a>

                        

                                
                            
                        @endforeach
             
    @endif
    
      @if($regular_ads->count() > 0)
     
                        @foreach($regular_ads as $ad)
                                                <a href="{{ route('single_ad', $ad->slug) }}">

                        <div class="grid-item"><div class="grid-container1">  <div class="grid-item1">                         <img itemprop="image"  src="{{ media_url($ad->feature_img) }}" class="image" alt=""></div>
  <div class="grid-item1 bcon">{{ $ad->title }} </div>  
  <div class="grid-item1 bcon1" > <div class="grid-container2"> <div class="grid-item2">{{ themeqx_price_ng($ad) }}</div>
  <div class="grid-item2 bconl">                                            @if($ad->purpose)
                                              
                                                    {{ $ad->purpose }}
                                            
                                            @endif
 </div></div> </div></div></div></a>

                        

                                
                            
                        @endforeach
             
    @endif
    
          @if($premium_ads->count() > 0)
     
                        @foreach($premium_ads as $ad)
                        <a href="{{ route('single_ad', $ad->slug) }}">
                        <div class="grid-item"><div class="grid-container1">  <div class="grid-item1">                         <img itemprop="image"  src="{{ media_url($ad->feature_img) }}" class="image" alt=""></div>
  <div class="grid-item1 bcon">{{ $ad->title }} </div>  
  <div class="grid-item1 bcon1" > <div class="grid-container2"> <div class="grid-item2">{{ themeqx_price_ng($ad) }}</div>
  <div class="grid-item2 bconl">                                            @if($ad->purpose)
                                              
                                                    {{ $ad->purpose }}
                                            
                                            @endif
 </div></div> </div></div></div></a>

                        

                                
                            
                        @endforeach
             
    @endif
</div>
</div>  
  <div class="item5">Footer</div>
</div>
</body>
</html>