@extends('layouts.main')
@section('content')  

<style>
    :root {
         --brand-red: #e6353f;
        --text-dark: #2b2b2b;
        --border-grey: #e2e2e2;
    }

    .products-hero {
        background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), url('{{ URL::to('/').'/public/assets/images/product_images/01.png' }}') center center / cover no-repeat;
        padding: 70px 20px;
        text-align: center;
        height:195px;

    }

    .products-hero h1 {
        color: #fff;
        font-size: 34px;
        font-weight: 700;
        margin: 0;
    }

    .news-events {
        max-width: 1140px;
        margin: 0 auto;
        padding: 60px 20px 80px;
    }

    .news-events__title {
        text-align: center;
        color: var(--text-dark);
        font-size: 26px;
        font-weight: 700;
        margin: 0 0 50px;
    }

    .news-events__dot {
        color: var(--brand-red);
    }

    .news-events__grid {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
    }

    .news-card {
        width: 380px;
        border: 1px solid var(--border-grey);
    }

    .news-card__media {
        display: block;
    }

    .news-card__media img {
        width: 100%;
        height: auto;
        display: block;
    }

    .news-card__body {
        padding: 18px 20px 24px;
        text-align: center;
    }

    .news-card__body h3 {
        color: var(--text-dark);
        font-size: 17px;
        font-weight: 600;
        margin: 0 0 15px;
    }

    .news-card__link {
        color: var(--brand-red);
        font-size: 14px;
        text-decoration: none;
        border: 1px solid var(--brand-red);
        padding: 5px 10px;
    }

    .news-card__link:hover {
        text-decoration: underline;
    }
</style>

<section class="products-hero">
    <h1>{{ __('messages.news_and_events_hero_title') }}</h1>
</section>

<section class="news-events">
    <h2 class="news-events__title">{{ __('messages.news_and_events_title') }} <span class="news-events__dot">.</span></h2>

    <div class="news-events__grid">

        <div class="news-card">
            <a href="{{ url('/sip-and-scan') }}" class="news-card__media">
                <img src="{{ URL::to('/').'/public/assets/images/product_images/WhatsApp-Image-2021-05-08-at-11.30.12-AM-400x250.jpeg' }}" alt="Sip and Scan">
            </a>
            <div class="news-card__body">
                <h3>{{ __('messages.news_and_events_sip_and_scan') }}</h3>
                <a href="{{ url('/sip-and-scan') }}" class="news-card__link">{{ __('messages.news_and_events_read_more') }}</a>
            </div>
        </div>

    </div>
</section>

@endsection