@extends('layouts.app')
@section('title', 'post-template-default')
@section('idname', 'single')
@section('content')

<div class="container mt-5">
    <div class="row">
        <div class="col-md-8">
            <h1 class="display-4">{{ $post->title }}</h1>
            <!-- Enlarge and Center the Image -->
            <img src="{{ Voyager::image($post->thumbnail('medium')) }}" width="70%" class="img-fluid rounded mb-4 mx-auto d-block" alt="{{ $post->title }}">
            <p class="lead">{{ $post->excerpt }}</p>
            <hr class="my-4">
            <div class="post-content">
                {!! $post->body !!} 
            </div>
        </div>

        <div class="col-md-4">
            <!-- Your content for the right column goes here -->
        </div>
    </div>
</div>


@endsection

@push('styles')
    <style>
        /* Add your custom styles here */
        .display-4 {
            color: #333;
        }

        .lead {
            font-size: 1.25rem;
            color: #555;
        }

        .post-content {
            line-height: 1.6;
            font-size: 1.1rem;
            color: #666;
        }

        /* Add more styles as needed */
    </style>
@endpush