.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 5px;
    padding-left: 5px;
	margin-bottom:10px;
}

.col-xs-5ths {
    width: 10%;
    float: left;
}

@media (min-width: 768px) {
    .category-row {
        text-align: center !important;
        display: block !important;
        font-size: 0 !important; /* This completely destroys the inline-block gaps */
    }

    /* 2. Style the columns, resetting the font size inside them */
    .category-row .col-md-5ths,
    .category-row .col-lg-5ths {
        display: inline-block !important;
        float: none !important;
        
        /* Reset font-size so your text card titles show up normal */
        font-size: 14px !important; 
        
        /* 13% width leaves exactly 9% free space for margins/gaps */
        width: 13% !important; 
        
        /* Perfect, equal margins around every card */
        margin-left: 0.2% !important;
        margin-right: 0.2% !important;
        
        vertical-align: top;
    }
}

@media (min-width: 992px) {
    .category-row {
        text-align: center !important;
        display: block !important;
        font-size: 0 !important; /* This completely destroys the inline-block gaps */
    }

    /* 2. Style the columns, resetting the font size inside them */
    .category-row .col-md-5ths,
    .category-row .col-lg-5ths {
        display: inline-block !important;
        float: none !important;
        
        /* Reset font-size so your text card titles show up normal */
        font-size: 14px !important; 
        
        /* 13% width leaves exactly 9% free space for margins/gaps */
        width: 13% !important; 
        
        /* Perfect, equal margins around every card */
        margin-left: 0.6% !important;
        margin-right: 0.6% !important;
        
        vertical-align: top;
    }
}

@media (min-width: 1200px) {
    .category-row {
        text-align: center !important;
        display: block !important;
        font-size: 0 !important; /* This completely destroys the inline-block gaps */
    }

    /* 2. Style the columns, resetting the font size inside them */
    .category-row .col-md-5ths,
    .category-row .col-lg-5ths {
        display: inline-block !important;
        float: none !important;
        
        /* Reset font-size so your text card titles show up normal */
        font-size: 14px !important; 
        
        /* 13% width leaves exactly 9% free space for margins/gaps */
        width: 13% !important; 
        
        /* Perfect, equal margins around every card */
        margin-left: 0.6% !important;
        margin-right: 0.6% !important;
        
        vertical-align: top;
    }
}
/* Base state of the category card */
.category-card {
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
    position: relative;
    z-index: 1;
    cursor: pointer;
}

/* Hover state: Makes it larger and adds a nice pop shadow */
.category-card:hover {
    transform: scale(1.08); /* Enlarges the card by 8% */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* Soft drop shadow */
    z-index: 10; /* Ensures the zoomed card sits on top of its neighbors */
}