I used grid and flex box for this project and media qurerys.

👾Hello ayush, congratulations for your new solution!

Here's some tips to improve your solution:

Improve your box-shadow givin it more blur to make it more smooth, heres a good value for the shadow:

section .box div {
    box-shadow: rgb(0 0 0 / 24%) 0px 3px 20px;
}

All you need to align the container vertical is to first remove width: 1440px (this measure you dont need to insert is just the value the design were created is a value for reference). Add min-height: 100vh to make the child element align to the parent height and flexbox properties for the alignment.

See the code changes below:

main {
    min-height: 100vh;
    /* width: 1400px; */
    margin-top: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

👋 I hope this helps you and happy coding!