@extends('front.layouts.app')
@section('local_styles')
    <link rel="stylesheet" href="/css/hipico.css">
    <link rel="stylesheet" href="/css/home.css">
@endsection
@section('content')

    <div  id="mobile-menu" class="mobile-menu">
        <button @click="animateMenu"  id="mobile-menu-button" class="mobile-menu__button"><i class="fas fa-bars"></i></button>
    </div>

  <header class="main-header">

      <div class="container">
          @include('front.partials.sticky')
          <div class="brand main-brand">
             <img src="/img/home/icon/tierra-logo.png" alt="">
          </div>
          <ul id="main-nav" class="main-nav" role="navigation">
              @include('front.partials.menu')
          </ul>
      </div>
  </header>
<section class="hipico">
    <div class="container">
        <div class="container-hipico-tittle">
            <h1>Ecuestre</h1>
        </div>
        <div class="container-hipico-img">
            <a  class="img-link" href="/polo">
                <div class="image" style=" background-image: url('/img/hipico/polo.jpg');">
                <div class="gradiant">
                    <div class="img-link__body">
                        <h1 class="img-link__title">POLO</h1>
                    </div>
                </div>
            </div>
        </a>
            <a  class="img-link"href="/salto">
                <div class="image" style=" background-image: url('/img/hipico/salto.jpg');">
                <div class="gradiant">
                    <div class="img-link__body">
                        <h1 class="img-link__title">SALTO</h1>
                    </div>
                </div>
            </div>
        </a>
            <a  class="img-link" >
                <div class="image" style=" background-image: url('/img/hipico/copa-rivera.jpg');">
                <div class="gradiant">
                    <div class="img-link__body">
                        <h1 class="img-link__title">COPA RIVERA NAYARIT</h1>
                        <p>Muchas gracias por asistir.</p>
                    </div>
                </div>
            </div>
        </a>
        </div>
    </div>
</section>
@endsection