fixed inconsistent width in home page

Author: krVatsal

src/sections/Home/Banner-4/banner4.style.js

@@ -40,10 +40,11 @@ const Banner1SectionWrapper = styled.section`
     /* Video container with fixed aspect ratio to prevent layout shifts */
     .video-wrapper {
         position: relative;
-        width: 90%;
+        width: 95%;
+        max-width: 600px;
         margin: auto;
         height: 0;
-        padding-bottom: 50.625%; /* 16:9 aspect ratio (9/16 = 0.5625) */
+        padding-bottom: 56.25%; /* 16:9 aspect ratio */
         overflow: hidden;
         border-radius: 8px;
         background: ${props => props.theme.DarkTheme ? "rgba(0, 0, 0, 0.2)" : "rgba(0, 0, 0, 0.05)"};
@@ -227,6 +228,9 @@ const Banner1SectionWrapper = styled.section`
         .video-col{
             display: none;
         }
+        .text-col {
+            width: 100%;
+        }
         .section-title {
             h1 {
                 margin: 0rem;
@@ -248,7 +252,14 @@ const Banner1SectionWrapper = styled.section`
         }
         .kanvasVideo {
             top: 1rem;
+        }
     }
+    
+    @media only screen and (max-width: 992px) and (min-width: 768px) {
+        .video-wrapper {
+            width: 100%;
+            max-width: 500px;
+        }
     }
     @media only screen and (max-width: 480px) {
         padding: 2rem 0;

src/sections/Home/Banner-4/index.js

@@ -82,9 +82,9 @@ const Banner1 = (props) => {
   return (
     <Banner1SectionWrapper {...props}>
       <BGImg title="heroImage" image={pluginImage}>
-        <Row style={{ marginRight: 0 }}>
-          <Col $sm={4} $lg={6} className="section-title-wrapper text-col">
-            <Container $fullWidthSM>
+        <Container>
+          <Row style={{ marginRight: 0 }}>
+            <Col $sm={4} $lg={6} className="section-title-wrapper text-col">
               <SectionTitle
                 className="section-title"
                 $leftAlign={true}
@@ -105,52 +105,52 @@ const Banner1 = (props) => {
                   </Button>
                 </VintageBox>
               </span>
-            </Container>
-          </Col>
-          {hasMounted && window.innerWidth > 760 && (
-            <Col $sm={4} $lg={6} className="section-title-wrapper video-col">
-              <div
-                className={`video-wrapper ${videoReady ? "video-loaded" : ""}`}
-                ref={thumbnailRef}
-                onClick={handleThumbnailClick}
-              >
-                <ReactPlayer
-                  url="https://youtu.be/034nVaQUyME?si=Yya8m6i7JUoSdZm4"
-                  playing
-                  controls
-                  light={videoThumbnail}
-                  playIcon={
-                    <img
-                      src={playIcon}
-                      className="playBtn"
-                      loading="eager"
-                      alt="Play"
-                      role="button"
-                      aria-label="Play"
-                      style={{ fontSize: "24px" }}
-                    />
-                  }
-                  width="100%"
-                  height="100%"
-                  className="embedVideo"
-                  onReady={handleVideoReady}
-                  onStart={handleVideoReady}
-                  onPlay={handleVideoReady}
-                  onBufferEnd={handleVideoReady}
-                  onClickPreview={handleVideoReady}
-                  config={{
-                    youtube: {
-                      playerVars: {
-                        rel: 0,
-                        modestbranding: 1,
-                      }
-                    }
-                  }}
-                />
-              </div>
             </Col>
-          )}
-        </Row>
+            {hasMounted && window.innerWidth > 760 && (
+              <Col $sm={4} $lg={6} className="section-title-wrapper video-col">
+                <div
+                  className={`video-wrapper ${videoReady ? "video-loaded" : ""}`}
+                  ref={thumbnailRef}
+                  onClick={handleThumbnailClick}
+                >
+                  <ReactPlayer
+                    url="https://youtu.be/034nVaQUyME?si=Yya8m6i7JUoSdZm4"
+                    playing
+                    controls
+                    light={videoThumbnail}
+                    playIcon={
+                      <img
+                        src={playIcon}
+                        className="playBtn"
+                        loading="eager"
+                        alt="Play"
+                        role="button"
+                        aria-label="Play"
+                        style={{ fontSize: "24px" }}
+                      />
+                    }
+                    width="100%"
+                    height="100%"
+                    className="embedVideo"
+                    onReady={handleVideoReady}
+                    onStart={handleVideoReady}
+                    onPlay={handleVideoReady}
+                    onBufferEnd={handleVideoReady}
+                    onClickPreview={handleVideoReady}
+                    config={{
+                      youtube: {
+                        playerVars: {
+                          rel: 0,
+                          modestbranding: 1,
+                        }
+                      }
+                    }}
+                  />
+                </div>
+              </Col>
+            )}
+          </Row>
+        </Container>
       </BGImg>
     </Banner1SectionWrapper>
   );