@extends('frontend.layouts.master')
@section('style')
    <style>
        .offer-item {
            transition: .5s ease-in-out;
            border: 2px solid var(--primary-100);
            box-shadow: 4px 4px 10px rgba(0,0,0,0.3);
        }
        .offer-item:hover {
            opacity: 0.8;
        }
    </style>
@endsection
@section('content')

    <div class="py-2 m-0 bg-transparent border-0 section">
        <div class="container">
            <div class="row">
                @foreach($offers as $offerKey => $offer)
                    <div class="col-lg-4 col-md-6 col-sm-12 col-12 mb-3">
                        <a href="{{route('offers.show', $offer->slug)}}" title="{{ $offer->title }}">
                            <img class="img-fluid offer-item rounded-4" src="{{ $offer->image }}" alt="{{ $offer->title }}"
                                 style="width: 100%; aspect-ratio: 4/2; object-fit: cover"/>
                        </a>
                    </div>
                @endforeach

            </div>
        </div>
    </div>

@endsection