@extends('layouts.pagina')
@section('css')
<link rel="stylesheet" href="{{ asset('css/noticia.css') }}">

@endsection
@section('head')
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@endsection
@section('banner')
    <img src="{{url('/img/banner_historia.jpg')}}" alt="">
@endsection
@section('contenido')
<div class="container-xl mb-4">
    <div class="reglon">
        <h3 class="titulo mt-4">Noticias</h3>  
    </div>
    <div class="row">
        
        <div class="row  row-cards">
            @foreach($noticias as $noticia)
                <div class="col-sm-12 col-lg-4 mt-4">
                    <div class="card placeholder-glow">
                        <div class="ratio ratio-21x9 card-img-top placeholder"><img src="{{url($noticia->ruta)}}" alt=""></div>
                        <div class="card-body">
                            <div class="placeholder col-9 mb-3 titulo_noticia">{{$noticia->titulo}}</div>
                            <div class="placeholder placeholder-xs col-10">{{substr($noticia->corta, 0, 250) >250? substr($noticia->corta, 0, 250).'...':$noticia->corta }}</div>
                            <div class="mt-3">
                                <a href="{{url('/noticias/'.$noticia->id)}}" tabindex="-1" class="btn btn-outline-success col-4" aria-hidden="true">Leer más</a>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>
@endsection