Hover Effect Adjustment Tips

}
.project-grid .taxonomy-icon {
position: relative;
display: inline-block;
width: auto;
}

.project-taxonomy-grid .project-grid {
flex: 1 1 30%;
position: relative;
overflow: hidden;
}
.project-taxonomy-grid .project-grid img {
width: 100%;
height: 229px; /* Set a fixed height for the images to make them equal */
object-fit: cover; /* Ensures the image covers the area without distortion */
}
.project-taxonomy-grid .project-grid .term-description
{
background-color: #225BC0;
padding: 10px 16px;
color:#fff;
font-family: 'Archia-medium', sans-serif;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: normal;
margin-bottom: 8px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.project-taxonomy-grid .project-grid .term-description .taxonomy-icon
{
padding:12.6px;
background-color:#fff;
}
.project-taxonomy-grid .project-grid .term-description .taxonomy-icon img
{
width:16.8px;
height:16.8px;
}
/* Hover Effects */

.project-grid .taxonomy-icon .icon {
display: inline-block;
transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth slide and fade */
transform: translateX(0); /* Default position */
opacity: 1; /* Fully visible by default */
}

.project-grid .taxonomy-icon .button-name {
display: inline-block;
position: absolute;
left: 100%; /* Start off-screen to the right */
white-space: nowrap;
opacity: 0; /* Initially invisible */
transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth slide and fade */
color:#225BC0;
}
.project-grid:hover .taxonomy-icon {
width: auto;
}
.project-grid:hover .taxonomy-icon .icon {
transform: translateX(-100%); /* Slide the arrow out of view */
opacity: 0; /* Fade out */
}

.project-grid:hover .taxonomy-icon .button-name {
transform: translateX(-100%); /* Slide "More info" into view */
opacity: 1; /* Fade in */
}
.project-grid .taxonomy-icon .button-name {
width: 100%; /* Ensure full width for text alignment */
text-align: center; /* Center-align the text */
line-height: 1.5; /* Optional: Adjust line height for better readability */
}
.project-taxonomy-grid .project-grid .description
{
font-family: 'Archia-medium', sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
color:#fff;
padding:36px 20px;
background-color: #225BC0;
position: absolute;
bottom:0px;
opacity:0.89;
}
on hover width auto not working but any numeric like 100% or 160px is working

Here are a few adjustments you can make to ensure the hover effect works as expected:

1. **Set a Minimum Width**: Instead of using `width: auto;`, try setting a `min-width` on the hover state. This ensures the element has a minimum size while still allowing it to grow as needed.

.project-grid:hover .taxonomy-icon {
        min-width: 160px; /* or another value based on your layout */
    }

2. **Flex Basis Adjustment**: You can adjust the `flex-basis` property on hover to control how much space the element occupies. For example:

.project-grid:hover .taxonomy-icon {
        flex-basis: auto; /* This allows the icon to take up space based on its content */
    }

3. **Change the Display Property**: If the icon behaves differently in terms of size, you can also try changing its display property temporarily. For example, setting it to `inline-flex` on hover:

.project-grid:hover .taxonomy-icon {
        display: inline-flex; /* Ensures the content is sized correctly */
        /* Add your desired width or min-width here */
    }

4. **Ensure Container Flex Settings**: Check if the parent container (`.project-grid`) has enough space for the `taxonomy-icon` to expand. If other flex items are constraining its size, you might need to adjust their properties or the overall layout.

5. **Test Without Other Styles**: Temporarily remove other styles applied to the `.taxonomy-icon` on hover to see if they interfere with the width change. Sometimes, transitions or positioning might affect layout behavior.

Here’s an example of how you can adjust the hover state:

.project-grid:hover .taxonomy-icon {
    display: inline-flex; /* or change to flex if needed */
    min-width: 160px; /* Set a minimum width */
    flex-basis: auto; /* Allow it to grow based on content */
}

Make sure to test these changes and see which combination works best for your layout!