I need the first two boxes to be positioned at the top with maximum width and the following two boxes to be placed at the bottom with the maximum width. Below are the CSS and HTML codes provided:
CSS Code:
/* Start Services */
.services {
padding-top: var(--section-pading);
padding-bottom: var(--section-pading);
}
@media (min-width: 768px) {
.services .services-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
}
}
.services .box {
display: flex;
}
.services .box i{
margin-right: 50px;
}
.services .box h3{
margin-bottom: 30px;
color: var(--main-color);
}
.services .box p{
line-height: 2;
}
/* End Services */
HTML Code:
<!-- Start Services -->
<div class="services">
<div class="container">
<div class="main-heading">
<h2>Services</h2>
<p> Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris
blandit aliquet elit, eget tincidunt.
</p>
</div>
<div class="services-container">
<div class="box">
<i class="fa-solid fa-display fa-3x"></i>
<div class="text">
<h3>Vorem amet intuitive</h3>
<p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at
sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar
a. Curabitur aliquet quam.</p>
</div>
</div>
//Additional code for box elements goes here
</div>
</div>
<!-- End Services -->
This is the current design result:
I would like the layout to resemble the image below, with 2 boxes above and 2 boxes below:
Can you provide some assistance with achieving this layout?