{% extends 'layout/dashboard_base.html' %} {% block content %}
<div class="main-content-container overflow-hidden">
	<div
		class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-4"
	>
		<h3 class="mb-0">Gallery</h3>

		<nav style="--bs-breadcrumb-divider: '>'" aria-label="breadcrumb">
			<ol class="breadcrumb align-items-center mb-0 lh-1">
				<li class="breadcrumb-item">
					<a
						href="#"
						class="d-flex align-items-center text-decoration-none"
					>
						<i class="ri-home-4-line fs-18 text-primary me-1"></i>
						<span class="text-secondary fw-medium hover"
							>Dashboard</span
						>
					</a>
				</li>
				<li class="breadcrumb-item active" aria-current="page">
					<span class="fw-medium">Extra Pages</span>
				</li>
				<li class="breadcrumb-item active" aria-current="page">
					<span class="fw-medium">Gallery</span>
				</li>
			</ol>
		</nav>
	</div>

	<div class="card bg-white border-0 rounded-3 mb-4">
		<div class="card-body p-4 pb-0">
			<div class="row">
				<div class="col-lg-4 col-sm-6">
					<div class="mb-4">
						<img
							src="/static/images/product-6.jpg"
							class="rounded-3"
							alt="product"
						/>
					</div>
				</div>
				<div class="col-lg-4 col-sm-6">
					<div class="mb-4">
						<img
							src="/static/images/product-7.jpg"
							class="rounded-3"
							alt="product"
						/>
					</div>
				</div>
				<div class="col-lg-4 col-sm-6">
					<div class="mb-4">
						<img
							src="/static/images/product-8.jpg"
							class="rounded-3"
							alt="product"
						/>
					</div>
				</div>
				<div class="col-lg-3 col-sm-6">
					<div class="mb-4">
						<img
							src="/static/images/product-9.jpg"
							class="rounded-3"
							alt="product"
						/>
					</div>
				</div>
				<div class="col-lg-3 col-sm-6">
					<div class="mb-4">
						<img
							src="/static/images/product-10.jpg"
							class="rounded-3"
							alt="product"
						/>
					</div>
				</div>
				<div class="col-lg-3 col-sm-6">
					<div class="mb-4">
						<img
							src="/static/images/product-11.jpg"
							class="rounded-3"
							alt="product"
						/>
					</div>
				</div>
				<div class="col-lg-3 col-sm-6">
					<div class="mb-4">
						<img
							src="/static/images/product-12.jpg"
							class="rounded-3"
							alt="product"
						/>
					</div>
				</div>
				<div class="col-lg-6 col-sm-6">
					<div class="mb-4">
						<img
							src="/static/images/product-13.jpg"
							class="rounded-3"
							alt="product"
						/>
					</div>
				</div>
				<div class="col-lg-6 col-sm-6">
					<div class="mb-4">
						<img
							src="/static/images/product-14.jpg"
							class="rounded-3"
							alt="product"
						/>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
{% endblock %}