Tea Cozy Web Dev Project: Grid Items Positioning (help)

Hey guys, I need help on grid position on items :sob:.

So my work so far is this:

However, my aim is to center the second row to the center, as in:

My Grid Container

<div class="month-teas-container">
			<div class="month-texts">
				<h2>Tea of the Month</h2>
				<h4>What's Stepping at The Tea Cozy?</h4>
			</div>
			<div class="month-teas-contentez">
				<div class="content">
					<img src="resources\berryblitz.jpg" alt="Fall Berry Blitz Tea">
					<h4>Fall Berry Blitz Tea</h4>
				</div>
				<div class="content">
					<img src="resources\spicedRum.jpg" alt="Spiced Rum Tea">
					<h4>Spiced Rum Tea</h4>
				</div>
				<div class="content">
					<img src="resources\donut.jpg" alt="Seasonal Donuts">
					<h4>Seasonal Donuts</h4>
				</div>
				<div class="content">
					<img src="resources\myrtle.jpg" alt="Myrtle Ave Tea">
					<h4>Myrtle Ave Tea</h4>
				</div>
				<div class="content">
					<img src="resources\bedford.webp" alt="Bedford Bizzare Tea">
					<h4>Bedford Bizzare Tea</h4>
				</div>
			</div>
		</div>

My CSS ruleset so far


.month-teas-container {
    display: inline-block;
    width: 1000px;
    justify-content: center;
    margin: 100px;
}

.month-teas-contentez {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    column-gap: 50px;
}

.content img {
    width: 300px;
    height: 200px;
}

Any workaround that you guys can provide considering I want to use Grid?

Appreciate any help. Thanks a lot :smiling_face_with_three_hearts: