@extends('layouts.'.env('THEME'))


@section('style')
<style>
.top-feature {
    background-image: url("/uploads/brand/bg-news.jpg");
    background-size: cover;
    background-position: right top;
}
.top-feature-text {
    text-shadow: 2px 2px #000;
}

@media (max-width: 992px) {
  .card-columns {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
  }
  .card-columns .card {
    display: inline-block;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .card-columns {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    -webkit-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
  }
  .card-columns .card {
    display: inline-block;
    width: 100%;
  }
}

</style>
@endsection

@section('content')

<div class="container-fluid darken top-feature" style="overflow: hidden;">
    <div class="row py-5 my-5">
        <div class="col-12 text-center top-feature-text">
            <h1 class="px-2" style="display: inline-block; margin-top: 0px;">
                News &amp; Updates
            </h1>
            <div class="row justify-content-center">
                <div class="col-lg-4 col-md-6 col-sm-7 col-10">
                    <h2 style="font-size: 1.5rem; font-weight: normal;">
                        {{ config('app.name') }} fibre optic internet rollout
                    </h2>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container" id="main-container">

    <div class="card border-dark my-5">
        <h5 class="card-header border-dark">Area specific news</h5>
        <div class="card-body">
            <div class="row">
                @foreach($live_areas as $area)
                    <div class="col-6 mb-2">
                        <a href="/fibre_internet/{{urlencode($area->name)}}">
                            <i class="fas fa-chevron-circle-right"></i> {{ $area->name }}
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <x-articles :articles="$articles" />

    <x-section_heading title="Can't find what you're looking for?" subtitle="Let us know and we'll add it to our list." rowclass="mt-5"/>
     <x-contact />

</div>
@endsection