Responsive Layout using Grid and Flex in SCSS

Hi there @Rhinozer0s, here are some suggestions from my side.

//replace you body{ } styles with
body {
//width: 100%;
min-height: 100vh;
background-color: hsl(233, 47%, 7%);
display: grid;
place-content: center;
}



// and your @media query  main{ } styles with
.main {
max-width: 75rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
margin-inline: 1rem;
//border: 0;
border-radius: 8px;
overflow: hidden;
}



// and also, replace your  main.picture img{ } styles with
main .picture img {
display: block;
width: 100%;
mix-blend-mode: multiply;
filter: contrast(0.65);
height: 100%;
object-fit: cover;
}

above improvements are especially good for responsiveness.