@extends('layouts.layouts')

@section('content')
<style>
    .ekskul-card img{
        height: 180px;
        object-fit: cover;
        border-radius: 12px;
    }

    .ekskul-card{
        background:white;
        border-radius:14px;
        padding:10px;
        box-shadow: 0 10px 15px rgba(0,0,0,0.08);
        transition:.3s;
    }

    .ekskul-card:hover{
        transform: translateY(-5px);
        box-shadow: 0 15px 20px rgba(0,0,0,0.15);
    }

    .title-ekskul{
        font-weight:700;
        font-size: 28px;
    }
</style>

<div class="container py-5" style="margin-top:90px">
    
    <h2 class="text-center title-ekskul mb-4">
        Semua Ekstrakurikuler
    </h2>

    <div class="row g-4 justify-content-center">

        @foreach ($ekskuls as $item)
        <div class="col-lg-3 col-md-4 col-6 text-center">
            <div class="ekskul-card">
                <img src="{{ asset('storage/' . $item->foto) }}" class="img-fluid mb-2">
                <p class="fw-semibold m-0">{{ $item->nama }}</p>
            </div>
        </div>
        @endforeach

    </div>

</div>
@endsection