{% extends "base.html" %}
{% block content %}
<!-- Option C: Magazine Overlap -->
<div class="position-relative p-5" style="min-height: 280px;">
    <div class="row">
        <div class="col-lg-7">
            <h1 class="display-3 fw-bold mb-3">Spicy Parmesan Chicken Pasta</h1>
            <p class="lead text-muted">A delicious weeknight dinner ready in 45 minutes with bold flavors</p>
        </div>
        <div class="col-lg-5">
            <img src="{{ url_for('static', filename='uploads/ff_1_photo_20260215_224827.png') }}" 
                 class="shadow-lg rounded-3" 
                 style="width: 100%; max-width: 400px; height: 280px; object-fit: cover; position: absolute; top: -20px; right: 40px; z-index: 10;">
        </div>
    </div>
</div>
<p class="text-center mt-3"><strong>Option C: Magazine Overlap</strong></p>
{% endblock %}