/*=============================
GRID SECTION
=============================*/

.home-grid-section{

padding:90px 0;

background:#fff;

}

.section-heading{

text-align:center;

margin-bottom:60px;

}

.section-heading h2{

font-size:42px;

font-weight:700;

margin-bottom:12px;

}

.section-heading p{

font-size:17px;

color:#777;

max-width:700px;

margin:auto;

}
/*=====================================================
COLLECTION GRID
=====================================================*/

.collection-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

/*=====================================================
CARD
=====================================================*/

.collection-card{

    position:relative;

    display:block;

    background:#fff;

    overflow:hidden;

    border-radius:18px;

    text-decoration:none;

    transition:.4s;

    box-shadow:0 8px 30px rgba(0,0,0,.06);

}

.collection-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 50px rgba(0,0,0,.18);

}

/*=====================================================
IMAGE
=====================================================*/

.collection-image{

    position:relative;

    overflow:hidden;

    background:#f5f5f5;

    aspect-ratio:1/1;

}

.collection-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s;

}

.collection-card:hover img{

    transform:scale(1.12);

}

/*=====================================================
OVERLAY
=====================================================*/

.collection-image:before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.55),
        rgba(0,0,0,0)
    );

    opacity:0;

    transition:.4s;

    z-index:2;

}

.collection-card:hover .collection-image:before{

    opacity:1;

}
/*=====================================================
CARD CONTENT
=====================================================*/

.collection-info{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:28px;

    z-index:5;

    color:#fff;

    transition:.35s;

}

.collection-card:hover .collection-info{

    padding-bottom:40px;

}

/*=====================================================
TITLE
=====================================================*/

.collection-info h3{

    margin:0;

    font-size:24px;

    font-weight:700;

    color:#fff;

    line-height:1.3;

}

/*=====================================================
DESCRIPTION
=====================================================*/

.collection-info p{

    margin:10px 0 18px;

    font-size:15px;

    color:rgba(255,255,255,.85);

    line-height:1.7;

}

/*=====================================================
LINK
=====================================================*/

.collection-info span{

    display:inline-flex;

    align-items:center;

    gap:10px;

    font-size:14px;

    font-weight:600;

    letter-spacing:1px;

    text-transform:uppercase;

    color:#fff;

    transition:.35s;

}

.collection-info span:after{

    content:"→";

    transition:.35s;

}

.collection-card:hover .collection-info span{

    color:#C9A96E;

}

.collection-card:hover .collection-info span:after{

    transform:translateX(8px);

}

/*=====================================================
GOLD BORDER
=====================================================*/

.collection-card:after{

    content:"";

    position:absolute;

    inset:0;

    border:2px solid #C9A96E;

    opacity:0;

    transition:.35s;

    border-radius:18px;

    pointer-events:none;

}

.collection-card:hover:after{

    opacity:1;

}

/*=====================================================
IMAGE PLACEHOLDER
=====================================================*/

.collection-image.no-image{

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#f5f5f5,#ececec);

}

.collection-image.no-image:before{

    content:"No Image";

    color:#999;

    font-size:15px;

    letter-spacing:2px;

    text-transform:uppercase;

}
/*=====================================================
SECTION FOOTER
=====================================================*/

.section-footer{

    margin-top:60px;

    text-align:center;

}

.view-all-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 40px;

    border:2px solid #C9A96E;

    color:#111;

    font-size:15px;

    font-weight:600;

    letter-spacing:1px;

    text-transform:uppercase;

    border-radius:50px;

    transition:.35s;

    text-decoration:none;

}

.view-all-btn:hover{

    background:#C9A96E;

    color:#fff;

    transform:translateY(-3px);

    box-shadow:0 15px 30px rgba(201,169,110,.35);

}

/*=====================================================
LAPTOP
=====================================================*/

@media (max-width:1400px){

.collection-grid{

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}

}

/*=====================================================
TABLET
=====================================================*/

@media (max-width:991px){

.home-grid-section{

    padding:70px 0;

}

.collection-grid{

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

.section-heading{

    margin-bottom:40px;

}

.section-heading h2{

    font-size:34px;

}

.collection-info{

    padding:22px;

}

.collection-info h3{

    font-size:22px;

}

}

/*=====================================================
MOBILE
=====================================================*/

@media (max-width:767px){

.home-grid-section{

    padding:55px 0;

}

.collection-grid{

    grid-template-columns:1fr;

    gap:18px;

}

.collection-card{

    border-radius:15px;

}

.collection-image{

    aspect-ratio:16/10;

}

.collection-info{

    padding:18px;

}

.collection-info h3{

    font-size:20px;

}

.collection-info p{

    font-size:14px;

}

.section-heading h2{

    font-size:28px;

}

.section-heading p{

    font-size:15px;

    padding:0 15px;

}

.view-all-btn{

    width:100%;

    max-width:280px;

    padding:14px 20px;

}

}

/*=====================================================
SMALL MOBILE
=====================================================*/

@media (max-width:480px){

.collection-image{

    aspect-ratio:4/3;

}

.collection-info{

    padding:16px;

}

.collection-info h3{

    font-size:18px;

}

.collection-info span{

    font-size:13px;

}

}
/*=========================================
Collection Card
=========================================*/

.collection-card {

    display: block;

    background: #fff;

    border-radius: 18px;

    overflow: hidden;

    text-decoration: none;

    box-shadow: 0 10px 35px rgba(0, 0, 0, .08);

    transition: .35s;

}

.collection-card:hover {

    transform: translateY(-8px);

}

/*=========================================
Image Area
=========================================*/

.collection-image {

    height: 320px;

    overflow: hidden;

    background: #f8f8f8;

    position: relative;

}

.collection-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}

/*=========================================
Placeholder
=========================================*/

.collection-placeholder {

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    background: linear-gradient(135deg, #f8f8f8, #efefef);

    color: #999;

}

.collection-placeholder i {

    font-size: 60px;

    margin-bottom: 20px;

    opacity: .35;

}

.collection-placeholder span {

    font-size: 20px;

    font-weight: 600;

    color: #444;

    text-align: center;

    padding: 0 20px;

}