html – exactly how to place the photo ahead making use of CSS grid in mobile sight

Exists any kind of means I can do to ensure that photo gets on top in mobile sight? I’m making use of a CSS grid I’m not yet completely acquainted with. my media inquiries are disappointing the result that desired specifically when I’m beginning to reduce the display dimension the format is kinda splitting?!

I wish to accomplish this mobile sight

CSS

 * {
margin: 0;
cushioning: 0;
box-sizing: border-box;
}

body {
background-color: hsl( 233, 47%, 7%);.
font-size: 15px;.
screen: flex;.
flex-direction: column;.
align-items: facility;.
justify-content: facility;.
shade: white;.
min-height: 100vh;.
margin: 1.5 em;.
}

. container {
background-color: hsl( 244, 38%, 16%);.
screen: grid;.
grid-template-columns: 1fr 1fr;.
elevation: 400px;.
max-width: 1080px;.
cushioning: 0;.
margin: car;.
overflow: concealed;.
border-radius: 0.5 em;.
}

. summary {
screen: flex;.
flex-direction: column;.
cushioning: 4em;.
}

. summary h1 {
font-family: "Inter", sans-serif;.
margin-bottom: 0.8 em;.
padding-right: 3em;.
}

. summary p {
font-family: "Lexend Deca", sans-serif;.
margin-bottom: 5em;.
shade: hsla( 0, 0%, 100%, 0.6);.
line-height: 1.8 em;.
font-size: 13px;.
padding-right: 2em;.
}

period {
shade: hsl( 277, 64%, 61%);.
}

. statistics {
screen: flex;.

justify-content: space-between;.
padding-top: 1.9 em;.
padding-right: 6em;.
margin-bottom: 1em;.
}

h3 {
font-family: "Inter", sans-serif;.
text-transform: capital;.
letter-spacing: 0.1 em;.
margin-bottom: 0.3 em;.
shade: hsla( 0, 0%, 100%, 0.75);.
}

. stat p {
text-transform: capital;.
font-size: 12px;.
shade: hsla( 0, 0%, 100%, 0.6);.
}

. img-box {
cushioning: 0;.
}

. img-box img {
size: 100%;.
elevation: 100%;.
object-fit: cover;.
cushioning: 0;.
}

@media (max-width: 700px) {
. container {
screen: grid;.
grid-template-columns: 500px;.
grid-template-rows: 350px 450px;.
}
}

. acknowledgment {
font-size: 11px;.
text-align: facility;.
}
. acknowledgment {a shade: hsl( 277, 64%, 61%);.
}

HTML

<.
<< html lang=" en">

<> < head>>.

<< meta charset=" UTF-8"/>>.

<< meta name=" viewport" web content=" size= device-width, initial-scale= 1.0"/>>.

<