{% extends "base.html" %}
{% block content %}
<!-- Option E: Angled Edge -->
<div class="position-relative overflow-hidden" style="min-height: 280px; background: white;">
    <div class="position-absolute" style="top: 0; right: 0; width: 45%; height: 100%; transform: skewX(-8deg); transform-origin: top right; overflow: hidden; margin-right: -50px;">
        <div style="transform: skewX(8deg); width: 120%; height: 100%; margin-left: -10%;">
            <img src="{{ url_for('static', filename='uploads/ff_1_photo_20260215_224827.png') }}" 
                 style="width: 100%; height: 100%; object-fit: cover;">
        </div>
    </div>
    <div class="position-relative p-5" style="z-index: 10;">
        <div style="max-width: 60%;">
            <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>
</div>
<p class="text-center mt-3"><strong>Option E: Angled Edge</strong></p>
{% endblock %}