How can I center the second row to the middle

const Carousel = () => {
  return (
    <div className='grid grid-cols-2 gap-12 justify-center items-center'>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
    </div>
  )
}

export default Carousel;

const Carousel = () => {
  return (
    <div className='grid grid-cols-2 gap-12 justify-center items-center'>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
    </div>
  )
}

export default Carousel;