@extends('layouts.app')

@section('content')

<style>
body {
    background: #141414;
    color: white;
}

.movie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.movie-card img {
    width: 100%;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.movie-card img:hover {
    transform: scale(1.08);
}
</style>

<div class="container mt-4">
    <h2>Browse Movies</h2>

    <div class="movie-grid mt-4">

        @foreach($movies as $movie)
            <div class="movie-card">
                <img src="{{ asset('storage/'.$movie->thumbnail) }}">
            </div>
        @endforeach

    </div>
</div>

@endsection