@extends('layout')

@section('header')
@include('components.header-inner', ['title' => 'Customise Product'])
@endsection

@section('content')

<style>
/* CONTAINER */
.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 15px;
}

/* CARD BOX */
.product-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 12px 8px;
    box-shadow: 0 3px 10px #00000010;
    text-align: center;
}

/* IMAGE */
.product-card img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    margin: 0 auto 8px;
}

/* TITLE */
.product-title {
    font-size: 12px;
    font-weight: 600;
    line-height: 14px;
}
</style>


<div class="product-grid">

    {{-- CARD 1 --}}
    <div class="product-card">
        <img src="{{ asset('/assets') }}/web/img/product.png" alt="">
        <div class="product-title">Window Border<br>Wood</div>
    </div>

    {{-- CARD 2 --}}
    <div class="product-card">
        <img src="{{ asset('/assets') }}/web/img/product.png" alt="">
        <div class="product-title">Window Border<br>Wood</div>
    </div>

    {{-- CARD 3 --}}
    <div class="product-card">
        <img src="{{ asset('/assets') }}/web/img/product.png" alt="">
        <div class="product-title">Room Border<br>Wood</div>
    </div>

    {{-- CARD 4 --}}
    <div class="product-card">
        <img src="{{ asset('/assets') }}/web/img/product.png" alt="">
        <div class="product-title">Door Border<br>Wood</div>
    </div>

    {{-- CARD 5 --}}
    <div class="product-card">
        <img src="{{ asset('/assets') }}/web/img/product.png" alt="">
        <div class="product-title">Door Border<br>Wood</div>
    </div>

    {{-- CARD 6 --}}
    <div class="product-card">
        <img src="{{ asset('/assets') }}/web/img/product.png" alt="">
        <div class="product-title">Window Border<br>Wood</div>
    </div>

</div>

@endsection