Item Page Template

<!-- MAIN CARD -->
<div class="card shadow mb-4 border-0">
    
    <!-- TITLE -->
    <div class="card-body">
    <div class="row">
        <div class="col-8">
        <h3>_TITLE_ ⋮ <small style="font-style: italic; font-size: small;"> _small_</small></h3>
        </div>
        <div class="col-4 d-flex flex-row-reverse">
        <h3>_RIGHT_</h3>
        </div>
    </div>
    <hr class="p-0 mb-0 mt-0">
    </div>
    
    <!-- CARD BODY -->
    <div class="card-body p-1">
    <div class="row">

        <!-- TEXT -->
        <div class="col col-lg ms-3">
        <h5>_MAIN_INFO_</h5><br>
        <small style="font-weight: bold;">_Option_: </small><small> _description_</small><br>
        <small style="font-weight: bold;">_Option_: </small><small> _description_</small><br>
        </div>
        
        <!-- PICTURE -->
        <div class="col col-lg text-end">
        <a href="#" target="_blank"><img src="{% static 'project/default.png' %}" alt="..." class="img-fluid rounded" style="max-height: 450px; min-width: 300px; max-width: 100%;"></a>
        </div>

    </div>
    </div>
</div>

<!-- OPTIONS & TOOLS -->
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-2 row-cols-lg-2 h-100 g-1 w-100">

    <!-- OPTIONS -->
    <div class="col">
    <div class="card text-center shadow mb-4 p-0">
        <div class="card-header"><strong class="text-center">OPTIONS</strong></div>
        <div class="card-body p-1 mb-2" style="min-height: 55px;">
        
        <a href="#" class="btn border-0 btn-sm" style="min-width: 50px;">
            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16"><path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/><path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/></svg>
            <br><small style="font-size: x-small;">Update</small>
        </a>

        </div>
    </div>
    </div>

    <!-- TOOLS -->
    <div class="col">
    <div class="card text-center shadow mb-4 p-0">
        <div class="card-header"><strong class="text-center">TOOLS</strong></div>
        <div class="card-body p-1 mb-2" style="min-height: 55px;">
        
        <a href="#" class="btn border-0 btn-sm" style="min-width: 50px;">
            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="currentcolor" class="bi bi-images" viewBox="0 0 16 16"><path d="M4.502 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" /><path d="M14.002 13a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2V5A2 2 0 0 1 2 3a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v8a2 2 0 0 1-1.998 2zM14 2H4a1 1 0 0 0-1 1h9.002a2 2 0 0 1 2 2v7A1 1 0 0 0 15 11V3a1 1 0 0 0-1-1zM2.002 4a1 1 0 0 0-1 1v8l2.646-2.354a.5.5 0 0 1 .63-.062l2.66 1.773 3.71-3.71a.5.5 0 0 1 .577-.094l1.777 1.947V5a1 1 0 0 0-1-1h-10z" /></svg>
            <br><small style="font-size: x-small;">Gallery</small>
        </a>
        
        </div>
    </div>
    </div>
</div>

<!-- FULL WIDTH -->
<div class="card shadow mb-4 p-0">
  <div class="card-header text-center"><strong>PANEL</strong></div>
  <div class="card-body p-1">
  <small>Info</small>
  </div>
</div>

_TITLE_ ⋮ _small_

_RIGHT_

---

_MAIN_INFO_

_Option_: _description_
_Option_: _description_