Image accordion in .jsx but the images are too far apart from eachother

I am currently having an issue with my image accordion. The accordion I implemented works fine, but at rest the images are really far away from each other, and I want to have them touching. I have an image of what I mean attached below. Can anyone help? thanks.
https://i.stack.imgur.com/o1y2Z.png

[usually when I remove the transform .1 -> 1 I get a full image and they sit side by side. The problem is I don’t want that. I want the resting image to be .1/1 scale ration and when I hover over the images, they become enlarged.

'

 
     `scaleX(${hoverIndex === index ? 1 : 0.1} '(https://i.stack.imgur.com/o1y2Z.png)

    import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { styles } from '../styles';
import { portfolio } from '../constants';
import { SectionWrapper } from '../hoc';
import { textVariant } from '../utils/motion';

const Portfolio = () => {
  const [hoverIndex, setHoverIndex] = useState(null);

  const handleMouseEnter = (index) => {
    setHoverIndex(index);
  };

  const handleMouseLeave = () => {
    setHoverIndex(null);
  };

  return (
    <>
      <motion.div variants={textVariant()}>
        <p className={`${styles.sectionSubText} text-center`}>
          Recent Projects + Events
        </p>
        <h2 className={`${styles.sectionHeadText} text-center`}>
          Portfolio.
        </h2>
      </motion.div>

      <div className="flex flex-wrap gap-(-)">
        {portfolio.map((item, index) => (
          <div
            key={index}
            className={`w-1/2 sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/4 ${
              hoverIndex === index ? 'sm:w-1/2 md:w-1/3 lg:w-1/2 xl:w-1/4' : 
              'sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/4'
            }`}
            onMouseEnter={() => handleMouseEnter(index)}
            onMouseLeave={handleMouseLeave}
            
          >
            <div
              className="relative overflow-hidden cursor-pointer flex-grow"
              style={{
                flex: hoverIndex === index ? 4 : 0.8,
                transition: 'flex 1s ease', // Add transition property
              }}
            >
              <img
                src={item.image}
                alt={`image${index + 1}`}
                className="w-full h-auto block transition-transform transform scale-x-150 object-cover"
                style={{
                  transform: `scaleX(${hoverIndex === index ? 1 : 0.1})`,
                  width: '120%',
                  height: '100%',
                }}
              />
            </div>
          </div>
        ))}
      </div>
    </>
  );
};

export default SectionWrapper(Portfolio, 'portfolio');'