Grid alignment not functioning properly in React JS

I am following a youtube tutorial to develop a React JS application. My grid is malfunctioning completely when i go to mobile screen to check compatibility and I am unable to understand why.

I have created data.js, infoElements.js, and index.js which are then called into the main index.js file.

infoElements.js:

export const InfoContainer = styled.div`
color: #fff;
background: ${({lightBg}) => (lightBg ? '#f9f9f9' : '#010606')};

@media screen and (max-width: 768px){
   padding: 100px 0;
}
`;


export const InfoWrapper = styled.div`
display: grid;
z-index: 1;
height: 860px;
width: 100%;
max-width: 1100px;
margin-right: auto;
margin-left: auto;
padding: 0 24px;
justify-content: center;
`;



export const InfoRow = styled.div`
display: grid;
z-index: 10;
grid-auto-columns: auto;
align-items: center;
grid-template-areas: ${({imgStart}) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};

@media screen and (max-width: 768px){
   grid-template-areas: ${({imgStart}) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)};
}
`;
export const TextWrapper = styled.div`
max-width: 540px;
padding-top: 0;
padding-bottom: 60px;
`;


export const Column1 = styled.div`
margin-bottom: 15px;
padding: 0 15px;
grid-area: col1;
border-right: 1px solid;
`;

export const Column2 = styled.div`
margin-bottom: 15px;
padding: 0 15px;
grid-area: col2;
border: 1px solid;
`;




export const TopLine = styled.p`
color: #01bf71;
font-size:16px;
line-height:16px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
margin-bottom: 16px;
`;


export const Heading = styled.h1`
margin-bottom: 24px;
font-size:48px;
line-height: 1.1;
font-weight: 600;
color: {({lightText}) => (lightText ? '#f7f8fa : '#010606')}

@media screen and (max-width: 480px){
   font-size: 32px;
}
`;



export const Subtitle = styled.p`
max-width: 440px;
margin-bottom:35px;
font-size:18px;
line-height: 24px;
color: ${({darkText}) => (darkText ? '#010606': '#fff')};
`;


export const BtnWrap = styled.div`
display: flex;
justify-content: flex-start;
`;


export const ImgWrap = styled.div`
max-width: 555px;
height:100%;
`;

export const Img = styled.img`

width: 100%;
margin: 0 0 10px 0;
padding-right: 0;
`;

data.js:

export const homeObjOne = {
id: 'about',
lightBg: false,
lightText: true,
lightTextDesc: true,
topLine: 'Premium Bank', 
headline: 'abcdefgh',
description: 'ywrchwbkrhvcbkcb',
buttonLabel: 'Lets go',
imgStart: false,
img: require("../../images/svg3.svg").default,
alt: 'Car',
dark:true,
primary: true,
darkText: false
};

index.js:

import React from 'react';
import {Button} from '../ButtonElements';


import { InfoContainer, 
    InfoWrapper, 
    InfoRow, TextWrapper, 
    Column1, 
   
    
    TopLine, 
    Heading, 
    Subtitle, 
    BtnWrap,
    Column2,  
    ImgWrap, 
    Img
   } from './InfoElements';
   
   const InfoSection = ({lightBg, id, imgStart, topLine, lightText, headline, darkText, description, buttonLabel, img, alt}) => {
  return (
      <>
    <InfoContainer lightBg={lightBg} id={id}>
        <InfoWrapper>
            <InfoRow imgStart={imgStart}>
                <Column1>
                 <TextWrapper>
                    <TopLine>{topLine}</TopLine>
                       <Heading lightText={lightText}> {headline}
                    </Heading>
                    <Subtitle darkText={darkText}>{description}</Subtitle>
                    <BtnWrap>
                        <Button to='home' >{buttonLabel}</Button>
                    </BtnWrap>
                    </TextWrapper>
                </Column1>
                <Column2>
                    <ImgWrap>
                        <Img src={img} alt={alt} />
                    </ImgWrap>
                </Column2>
            </InfoRow>

        </InfoWrapper>
    </InfoContainer>

</>


  )
}

export default InfoSection;

The imported button is as follows:

import styled from 'styled-components';
import {Link} from 'react-scroll';

export const Button = styled(Link)`
border-radius: 50px;
background: ${({primary}) => (primary ? '#b24d25' : '#010606')};
white-space: nowrap;
padding: ${({big}) => (big ? '1px 48px':'12px 30px')};
color: ${({dark}) => (dark ? '#010606' : '#fff')};
font-size: ${({fontBig}) => (fontBig ? '20px' : '16px')};
outline: none;
border: 3px solid #fff;
opacity: 60%;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;

transition: all 0.2s ease-in-out;


&: hover {
    transition: all 0.2s ease-in-out;
    background: ${({primary}) => (primary ? '#fff': '#be4d25' )};

}

This is the output that is showing:

its going out of screen and not fitting. the whole thing is misbehaving because of this

Need to two columns side by side if the window is expanded else (like in the case of a smaller screen) one below the other.

Note: It was working fine till I added .default at the end of img src in data.js.

Thank you for your help, I have spent a lot of time going through this.