/* custom.css or site.css */

.custom-col {
    padding: 5px; /* Add some padding to space out the columns */
}

@media (min-width: 576px) {
    .custom-col {
        flex: 0 0 50%; /* Take up 50% of the width on small screens */
        max-width: 50%; /* Ensure the column does not exceed 50% of the width */
    }
}

@media (min-width: 768px) {
    .custom-col {
        flex: 0 0 33.333333%; /* Take up one-third of the width on medium screens */
        max-width: 33.333333%; /* Ensure the column does not exceed one-third of the width */
    }
}

@media (min-width: 992px) {
    .custom-col {
        flex: 0 0 25%; /* Take up one-fourth of the width on large screens */
        max-width: 25%; /* Ensure the column does not exceed one-fourth of the width */
    }
}

@media (min-width: 1200px) {
    .custom-col {
        flex: 0 0 16.666667%; /* Take up one-sixth of the width on extra-large screens */
        max-width: 16.666667%; /* Ensure the column does not exceed one-sixth of the width */
    }
}

.custom-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    white-space: normal;
    padding: 10px;
    height: 150px; /* Set a fixed height for the buttons */
    width: 100%; /* Set the width to 100% to fit the grid column */
    overflow: hidden; /* Hide any overflow content */
    text-align: center; /* Center the text */
}

    .custom-button img {
        max-width: 70%; /* Ensure the image does not exceed 70% of the button width */
        max-height: 70%; /* Set a maximum height for the images */
        margin-bottom: 5px; /* Reduce the space between the image and the text */
    }