@extends('layouts.home.index')
@section('title','Beranda')
@section('content')

@include('home._js.index')

@push('style')
    <style>
        .banner img {
            object-fit: cover !important;
            width: 100% !important;
        }

        .date {
            color: #085f94 !important;
        }

        .description {
            color: #000 !important;
        }
    </style>
@endpush

<div class="container">
    <div class="category-home">
        <div class="category">
            <div class="category-grid">

                <div class="category-item shadow" data-id-category="7" data-name="Tsunami">
                    <div class="category-content">
                        <img src="{{ asset('assets/img/category/tsunami.png') }}" alt="">
                        <small for="" class="text-white">Tsunami</small>
                    </div>
                </div>
    
                <div class="category-item shadow" data-id-category="2" data-name="Gempa">
                    <div class="category-content">
                        <img src="{{ asset('assets/img/category/gempa.png') }}" alt="">
                        <small for="" class="text-white">Gempa</small>
                    </div>
                </div>
            
                <div class="category-item shadow" data-id-category="4" data-name="Longsor">
                    <div class="category-content">
                        <img src="{{ asset('assets/img/category/longsor.png') }}" alt="">
                        <small for="" class="text-white">Longsor</small>
                    </div>
                </div>
    
                <div class="category-item shadow" data-id-category="1" data-name="Banjir">
                    <div class="category-content">
                        <img src="{{ asset('assets/img/category/banjir.png') }}" alt="">
                        <small for="" class="text-white">Banjir</small>
                    </div>
                </div>
            
                <div class="category-item shadow" data-id-category="3" data-name="Erupsi">
                    <div class="category-content">
                        <img src="{{ asset('assets/img/category/erupsi.png') }}" alt="">
                        <small for="" class="text-white">Erupsi</small>
                    </div>
                </div>

                <div class="category-item shadow" data-id-category="5" data-name="Kebakaran">
                    <div class="category-content">
                        <img src="{{ asset('assets/img/category/kebakaran.png') }}" alt="">
                        <small for="" class="text-white">Kebakaran</small>
                    </div>
                </div>

                <div class="category-item shadow" data-id-category="6" data-name="Puting Beliung">
                    <div class="category-content">
                        <img src="{{ asset('assets/img/category/puting-beliung.png') }}" alt="">
                        <small for="" class="text-white">Puting Beliung</small>
                    </div>
                </div>
                
                <div class="category-item shadow" data-id-category="8" data-name="Abrasi">
                    <div class="category-content">
                        <img src="{{ asset('assets/img/category/abrasi.png') }}" alt="">
                        <small for="" class="text-white">Abrasi</small>
                    </div>
                </div>

                <div class="category-item shadow" data-id-category="9" data-name="Kekeringan">
                    <div class="category-content">
                        <img src="{{ asset('assets/img/category/kekeringan.png') }}" alt="">
                        <small for="" class="text-white">Kekeringan</small>
                    </div>
                </div>
    
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="clearfix">
        <h1 class="section-title float-start"><span>BERITA</span> TERKINI</h1>
        <div class="float-end d-none d-md-block">
            <a href="/berita" class="text-primary"><small><b>Lihat Semua</b></small></a>
        </div>
    </div>
    <div class="news-home">
        <div class="news-recommendation">
            <div class="news-recommendation-grid news-container">
            
            </div>
        </div>
    </div>
</div>

@endsection
@push('style')

@endpush
@push('script')

@endpush