diff --git a/src/components/sections/two-column-h2.js b/src/components/sections/two-column-h2.js
index 674717bf2..650b8d2cc 100644
--- a/src/components/sections/two-column-h2.js
+++ b/src/components/sections/two-column-h2.js
@@ -42,8 +42,8 @@ const TwoColumnH2 = ({
 			<div className={"row align-items-center"}>
 
 				<div className={`col col-12 col-lg-6 anim-col ${animVersion === 2 && 'px-2'} ${direction === "rtl" ? "order-lg-2" : "order-lg-1"}`}>
-					{anim && <Lottie lottieRef={lottieRef} animationData={anim} loop={false} autoplay={false}
-									 renderer={"canvas"} style={{width: animVersion === 2 ? 680 : 700, height: animVersion ? 450 : 450}}
+					{anim && <Lottie className={`lottie-anim-${animVersion}`} lottieRef={lottieRef} animationData={anim} loop={false} autoplay={false}
+									 renderer={"canvas"}
 					/>}
 					{!anim && <Image alt={title} filename={image} />}
 				</div>
diff --git a/src/scss/sections/two-column-h2-section.scss b/src/scss/sections/two-column-h2-section.scss
index 7d89599a7..fdb753156 100644
--- a/src/scss/sections/two-column-h2-section.scss
+++ b/src/scss/sections/two-column-h2-section.scss
@@ -65,3 +65,32 @@
 		}
 	}
 }
+
+.anim-col{
+	.lottie-anim-1{
+		width:700px;
+		height:450px;
+
+		@media (max-width: 1380px) {
+			width:100%;
+			height:unset;
+
+			canvas{
+				max-width:100%;
+			}
+		}
+	}
+	.lottie-anim-2{
+		width:680px;
+		height:450px;
+
+		@media (max-width: 1380px) {
+			width:100%;
+			height:unset;
+
+			canvas{
+				max-width:100%;
+			}
+		}
+	}
+}