.category-showcase-wrapper {
    width: 100%;
}

.category-grid {
    display: grid;
    gap: 20px;
    width: 100%;
}

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

.category-grid.columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.category-grid.columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.category-grid.columns-5 {
    grid-template-columns: repeat(5, 1fr);
}

.category-grid.columns-6 {
    grid-template-columns: repeat(6, 1fr);
}

.category-item {
    position: relative;
    transition: all 0.3s ease;
}

.category-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.category-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    transition: all 0.3s ease;
}

.category-item:hover .category-image {
    transform: scale(1.05);
}

.category-title {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
}

.category-name {
    display: inline-block;
}

.category-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

/* Responsive Design */
@media (max-width: 768px) {
    /* Default mobile behavior for grids without mobile-columns class */
    .category-grid.columns-4:not([class*="mobile-columns"]),
    .category-grid.columns-5:not([class*="mobile-columns"]),
    .category-grid.columns-6:not([class*="mobile-columns"]) {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Mobile 1 column */
    .category-grid.mobile-columns-1 {
        grid-template-columns: repeat(1, 1fr) !important;
    }
    
    /* Mobile 2 columns */
    .category-grid.mobile-columns-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    /* Default behavior for very small screens */
    .category-grid:not([class*="mobile-columns"]) {
        grid-template-columns: repeat(1, 1fr);
    }
    
    /* Keep mobile column settings on small screens too */
    .category-grid.mobile-columns-1 {
        grid-template-columns: repeat(1, 1fr) !important;
    }
    
    .category-grid.mobile-columns-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}