How to Create Mobile Responsive Service Box with Html and Css

<div class="service-box-main">

<div class="service-box">
<div class="service-icon">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR59sGbVDT-_-pWIaVj0-ji-9_komt9IkFPgw&s" alt="Service Icon">
</div>
<div class="service-content">
<h3 class="service-title">Service Title One</h3>
<p class="service-description">This is a Just run the command Show parameter description</p>
</div>
</div>

<div class="service-box">
<div class="service-icon">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTeujOaRWnmiTkG15-RkZrieVZ_JKumVf1CPQ&s" alt="Service Icon">
</div>
<div class="service-content">
<h3 class="service-title">Service Title Two</h3>
<p class="service-description">This is a Just run the command Show parameter description</p>
</div>
</div>

<div class="service-box">
<div class="service-icon">
<img src="https://cdn-icons-png.flaticon.com/512/75/75668.png" alt="Service Icon">
</div>
<div class="service-content">
<h3 class="service-title">Service Title Three</h3>
<p class="service-description">This is a Just run the command Show parameter description</p>
</div>
</div>

</div>

.service-box-main{width: 80%;margin: auto;justify-content: center;display: flex;}
.service-box {
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 20px;
width: 33.33%;
margin: 20px;
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
}

/* Icon container */
.service-icon {
margin-bottom: 15px;
}

/* Icon image */
.service-icon img {

object-fit: scale-down;
height: 50px;
}

/* Service title */
.service-title {
font-size: 1.5em;
margin: 10px 0;
color: #333;
}

/* Service description */
.service-description {
font-size: 1em;
color: #666;
}

/* Hover effect */
.service-box:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
/*Mobile Responsive*/
@media only screen and (max-width: 767px) {
.service-box-main {
width: 100%;
margin: auto;
justify-content: center;
display: block;
}
.service-box-main{width: 98%;
}
/*end mobile responsive*/