/* ==========================================================================
   CATEGORY GRID
========================================================================== */

.custom-category-grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:1.5rem;
}

/* ==========================================================================
   TOP ROW = 2 ITEMS
========================================================================== */

.custom-category-card:nth-child(1) {
    grid-column:span 3;
}

.custom-category-card:nth-child(2) {
    grid-column:span 3;
}

/* ==========================================================================
   SECOND ROW = 3 ITEMS
========================================================================== */

.custom-category-card:nth-child(3),
.custom-category-card:nth-child(4),
.custom-category-card:nth-child(5) {
    grid-column:span 2;
}

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

.custom-category-card {
    position:relative;
    display:block;
    overflow:hidden;
    border-radius: 0.625rem;
    min-height:420px;
    text-decoration:none !important;
    color:#fff !important;
    isolation:isolate;
    box-shadow:0 10px 30px rgba(0,0,0,0.15);
}

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

.custom-category-bg{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    transition:transform 0.5s ease;
    z-index:-2;
}

.custom-category-card:hover .custom-category-bg{
    transform:scale(1.08);
}

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

.custom-category-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            to top,
            rgba(0,0,0,0.82) 0%,
            rgba(0,0,0,0.45) 45%,
            rgba(0,0,0,0.15) 100%
        );
    z-index:-1;
}

/* ==========================================================================
   CONTENT
========================================================================== */

.custom-category-content{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    height:100%;
    padding:2rem;
}

.custom-category-content h3{
    margin:0 0 0.8rem;
    color:#fff;
    font-size: var(--fluid-h3);
    line-height:1.1;
    font-weight:700;
}

.custom-category-description{
    color:#fff;
    font-size: var(--fluid-h6);
    line-height:1.5;
    font-weight: 400;
}

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

@media (max-width:1024px){

    .custom-category-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .custom-category-card{
        grid-column:auto !important;
        min-height:360px;
    }
}

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

@media (max-width:600px){

    .custom-category-grid{
        grid-template-columns:1fr;
    }

    .custom-category-card{
        min-height:320px;
        border-radius:1rem;
    }

    .custom-category-content{
        padding:1.5rem;
    }
}