@extends('layouts.master')
@section('css')

<style type="text/css">
    .gridall {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-gap: 1rem;
    }
    @media (min-width: 200px) {
      .gridall { grid-template-columns: repeat(2, 0.5fr); padding-left: : 1px; padding-right: : 1px;padding-top: : 1px; margin-top: 50px}
    }
    @media (min-width: 400px) {
      .gridall { grid-template-columns: repeat(3, 0.5fr); padding-left: : 1px; padding-right: : 1px;padding-top: : 1px; margin-top: 50px}
    }
    @media (min-width: 600px) {
      .gridall { grid-template-columns: repeat(4, 0.5fr); }
    }
    @media (min-width: 900px) {
      .gridall { grid-template-columns: repeat(6, 0.5fr); }
    }
    .img-radius{
        border-radius: 20%;
        /*-webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);*/
    /*-moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);*/
    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.5);
    }
</style>
@endsection
@section('content')
<div class="row justify-content-center">
    <div class="col-12 text-center">         
         <div class="col-12">
            <div class="gridall">
                @foreach($home_menu as $menu)
                    @if(isset($menu->icon))
                    <div class="grids">                    
                        <div class="user-thumb text-center">
                        <a href="{{ url($menu->url) }}"><img  class="img-radius" alt="thumbnail"  width="120" src="{{ icon_modul($menu->icon) }}">
                        </a>
                        <p></p>
                        </div>
                    </div>
                    @endif
                @endforeach
                
         </div>
    </div>
    </div>
@endsection