.subcategory-grid {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    justify-content: space-around;
    gap: 1rem; /* Space between items */
}

.subcategory-item {
    /*flex: 0 1 calc(33.33% - 20px);*/
    /* Each item takes 1/3 of the row minus margins */
    box-sizing: border-box; /* Ensure padding is included in width */
    border: 1px solid #ddd; /* Optional: Add border */
    border-radius: 4px; /* Rounded corners */
    padding: 1.1rem; /* Padding for spacing */
    text-align: center; /* Center content */
    transition: box-shadow 0.3s ease;
    min-width: 30%;
    width: 30%;
    max-width: 30%;
}

.subcategory-item:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Shadow on hover */
}

.subcategory-image-container {
    width: 100%; /* Full width */
    min-width: 100%;
    max-width: 100%;
    height: 15rem !important; /* Fixed height to ensure uniformity */
}

.subcategory-image {
    height: 100% !important;
    max-height: 100% !important; /* Full width */
    /*min-width: 100%;*/
    max-width: 100% !important;
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    object-fit: cover;
    /*height: 15rem !important;*/ /* Fixed height to ensure uniformity 
    object-fit: scale-down; /* Crop to fit while maintaining aspect ratio */
}


/* On smaller screens, stack elements vertically */
@media (max-width: 1199px) {

    .subcategory-item {
        min-width: 30%;
        width: 45%;
        max-width: 50%;
    }
    
    .subcategory-image-container {
        width: 100%;
        min-width: 100%;
        height: 10rem !important; /* Fixed height to ensure uniformity */
    }
}

/* On smaller screens, stack elements vertically */
@media (max-width: 779px) {
    /*.subcategory-grid {*/
        /*flex-direction: column;*/
    /*}*/

    .subcategory-item {
        min-width: 30%;
        width: 45%;
        max-width: 50%;
    }
    
    .subcategory-image-container {
        width: 100%;
        min-width: 100%;
        height: 12rem !important; /* Fixed height to ensure uniformity */
    }
}


/* On smaller screens, stack elements vertically */
@media (max-width: 509px) {
    .subcategory-grid {
        flex-direction: column;
    }

    .subcategory-item {
        margin-bottom: 15px;
        min-width: 100%;
        width: 100%;
        max-width: 100%;
    }
    
    .subcategory-image-container {
        width: 100%;
        min-width: 100%;
        height: 7rem !important; /* Fixed height to ensure uniformity */
    }
}


.subcategory-title {
    font-size: 1.2rem; /* Title font size */
    margin: 0.8rem 0; /* Margin for spacing */
}

.subcategory-item .button {
    background-color: black; /* Default button color */
    color: #ffffff; /* Text color */
    padding: 0.8rem 1rem; /* Padding */
    text-decoration: none; /* Remove underline */
    border-radius: 4px; /* Rounded corners */
    transition: background-color 0.3s ease;
}

.subcategory-item .button:hover {
    background-color: #005a8a; /* Darker shade on hover */
}