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

@include('berita._js.category')

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

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

        .description {
            color: #000 !important;
        }

        .form-control {
            padding: 0.375rem 2.25rem 0.375rem 0.75rem !important;
            border-radius: 0.375rem !important;
            border: 1px solid #ced4da !important;
            color: #212529 !important;
            width: 300px !important;
        }

        @media screen and (max-width: 768px) {
            .form-control {
                width: 100% !important;
            }

            .news-search {
                justify-content: center !important;
            }
        }
    </style>
@endpush

<div class="container">

    <div class="news">

        <div class="">
            <h1 class="section-title"><span>Berita</span> <span class="news-category text-dark"></span></h1>
        </div>
        
        <div class="news-recommendation">
            <div class="news-search d-flex flex-wrap justify-content-end my-3 gap-3">
                <input type="search" name="search" id="search" class="form-control" placeholder="Cari">
            </div>

            <div class="alert-berita"></div>

            <div class="news-recommendation-grid news-container">
            
            </div>
        </div>

        <nav aria-label="..." class="mt-5 d-flex justify-content-end">
            <ul class="pagination">
                
                </li>
            </ul>
        </nav>
    </div>

</div>

@endsection