i am a begginer of flex box css i have doen it simple design using css flex and grid. i am confidence is this design code is correct or not i did use AI here is design screen shot not not come as the work like thisi need to look like this how :
but i output is coming look like this
what i tried so far i attached below please correct them.
.footer1 { padding: 60px; display: grid; grid-template-columns: repeat(4, 1fr); justify-content: center; /* Centers the grid horizontally */ align-items: center; /* Centers the grid vertically */ margin: 0 auto; width: 80%;}.artcles1 { display: flex; gap: 10px;}.icon { display: flex; align-items: flex-start; /* Aligns text content to the start */ width: 60px;}.text { display: flex; flex-direction: column; align-items: flex-start; /* Aligns text content to the start */ font-size: 20px; gap: 20px; /* Reduces space between lines */}.text h4 { color: red; font-size: 30px; margin: 0;}.text span { margin: 0; line-height: 1; /* Ensures minimal space between lines */ font-size: 18px; color: #333; font-weight: 700px; font-size: 25px;}<div style="background: antiquewhite;"><div class="footer1"><div class="artcles1"><div class="icon"><img src="https://esoft.lk/wp-content/themes/esoft_metro_campus/assets/img/years.png"></div><div class="text"><h4>23 Years</h4><span>of Excellence</span></div></div><div class="artcles1"><div class="icon"><img src="https://esoft.lk/wp-content/themes/esoft_metro_campus/assets/img/years.png"></div><div class="text"><h4>23 Years</h4><span>of Excellence</span></div></div><div class="artcles1"><div class="icon"><img src="https://esoft.lk/wp-content/themes/esoft_metro_campus/assets/img/years.png"></div><div class="text"><h4>23 Years</h4><span>of Excellence</span></div></div><div class="artcles1"><div class="icon"><img src="https://esoft.lk/wp-content/themes/esoft_metro_campus/assets/img/years.png"></div><div class="text"><h4>23 Years</h4><span>of Excellence</span></div></div></div></div>can you correct the style what the image i attached above first