Box agreement in grid layout in css

Question

I want the first two boxes be up with the max width and the seconed two boxes be down with the max width and here are the codes.

This is the CSS Code:

/* Start Services  */
.services {
    padding-top: var(--section-pading);
    padding-bottom: var(--section-pading);
}
@media (min-widht: 768px) {
    .services .services-contianer {
        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  */

This is the 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>
            </div>
            <div class="services-container">
                <div class="box">
                    <i class="fa-solid fa-gear 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>
            </div>
            <div class="services-container">
                <div class="box">
                    <i class="fa-solid fa-pen-ruler 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>
            </div>
            <div class="services-container">
                <div class="box">
                    <i class="fa-solid fa-camera 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>
            </div>
        </div>
    </div>
    <!-- End Services -->

This is the result that I have :

enter image description here

I want the design to be like the image below I wnat 2 boxes up and 2 down :

enter image description here

Can You Help??

Answer 1

As I checked the code, There was spellings mistakes in the CSS code. And I've made some changes in the HTML code.

Spelling Mistakes:

Please check the Updated below 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(50%, 1fr));
/*       background-color: red; */
    }
}
.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  */

 <!-- 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>
              <div class="box">
                    <i class="fa-solid fa-gear 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>
              <div class="box">
                    <i class="fa-solid fa-pen-ruler 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>
              <div class="box">
                    <i class="fa-solid fa-camera 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>
            </div>
        </div>
    </div>
    <!-- End Services -->