.two-column-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.grid-four-sliders {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.text-section {
  color: black;
  padding: 20px;
  
  border-radius: 8px;
}
/* Include additional styles from previous code */

/* SIMPLE BEFORE & AFTER IMAGE COMPARISON SLIDER 

Original JS function forked from Josetxu

---> https://codepen.io/josetxu/pen/mJbmZY

Responsive before and after image comparison slider. Vanilla Javascript and minimal markup.

Slider and background image dimensions set as aspect ratio.

Photo is a restoration for a friend. Original - source photo was a
tiny, low resolution JPG she found on Ancestry. Necessity taught me some amazing photo restoration tricks when hurricane Katrina put the hurt on New Orleans. I got stories.  */
.slider-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  padding: 20px;
}

.text-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
  
  font-size: 1vw;
  line-height: 1.4;
}

@media only screen and (max-width: 980px) {
  .parent-container {
      grid-template-columns: 1fr; /* Stack columns on smaller screens */
  }
  
  .slider-grid {
      grid-template-columns: 1fr; /* Single column for sliders */
  }
  
  .text-section h2 {
      font-size: 21px;
  }
  
  .text-section p {
      font-size: 16px;
  }
}


:root {
/* Set aspect ratio for .before-after-container.  
   Background images need to be same aspect ratio as container in pixels. 
   Handy tool to get aspect ratio for any image dimension.

  ---> https://www.digitalrebellion.com/webapps/aspectcalc

Aspect Ratios on CSS Tricks
 ----> https://css-tricks.com/almanac/properties/a/aspect-ratio/

   */

--before-after-aspect-ratio: 1 / 1;    /* <--- Square 1080px x 1080px */

/* Before and After Images */


/** **************

Example with a 16 / 9 ratio 
  --before-after-aspect-ratio: 16 / 9;
  --before-image: url(https://assets.codepen.io/191814/16-9-original-Great-Grandfather.jpg);
  --after-image: url(https://assets.codepen.io/191814/16-9-Repaired-Sharpened-Great-Grandfather.jpg);

**************** */

/* Before After Container Background Color  */
--before-after-background-color: #1f1f1c;
}

.before-after-container {
aspect-ratio: var(--before-after-aspect-ratio);

width: 100%;
overflow: hidden;
transition: all 0.3s ease-in-out;
}
.before-after-container figure {
background-image: var(--after-image);
position: relative;
margin: 0;
background-size: cover;
width: 100%;
height: 100%;
}
#before_after1,
#before_after2,
#before_after3,
#before_after4 {

background-size: cover;
bottom: 0;
border-right: 5px solid rgba(255, 255, 255, 0.7);
box-shadow: 10px 0 15px -13px #000;
height: 100%;
max-width: 98.6%;
min-width: 0.6%;
overflow: visible;
position: absolute;
width: 50%;
animation: first 2s 1 normal ease-in-out 0.1s;
-webkit-animation: first 2s 1 normal ease-in-out 0.1s;
}
#before_after1 {
background-image: var(--before-image1);
background-size: cover;
}

.before-after-container:nth-child(1) #before_after1 {
background-image: var(--before-image1);
}
.before-after-container:nth-child(1) figure {
background-image: var(--after-image1);
}

#before_after2 {
background-image: var(--before-image2);
background-size: cover;
}

#before_after3 {
background-image: var(--before-image3);
background-size: cover;
}

#before_after4 {
background-image: var(--before-image4);
background-size: cover;
}

.before-after-container:nth-child(1) #before_after1 {
background-image: var(--before-image1);
}
.before-after-container:nth-child(1) figure {
background-image: var(--after-image1);
}

.before-after-container:nth-child(2) #before_after2 {
background-image: var(--before-image2);
}
.before-after-container:nth-child(2) figure {
background-image: var(--after-image2);
}

.before-after-container:nth-child(3) #before_after3 {
background-image: var(--before-image3);
}
.before-after-container:nth-child(3) figure {
background-image: var(--after-image3);
}

.before-after-container:nth-child(4) #before_after4 {
background-image: var(--before-image4);
}
.before-after-container:nth-child(4) figure {
background-image: var(--after-image4);
}



input#before_after_slider1, 
input#before_after_slider2, 
input#before_after_slider3, 
input#before_after_slider4{
-moz-appearance: none;
-webkit-appearance: none;
border: none;
background: transparent;
cursor: col-resize;
height: 100vw;
left: 0;
margin: 0;
outline: none;
padding: 0;
position: relative;
top: -100vw;
width: 100%;
}
input#before_after_slider1::-moz-range-track,
input#before_after_slider2::-moz-range-track,
input#before_after_slider3::-moz-range-track,
input#before_after_slider4::-moz-range-track {
background: transparent;
}


input#before_after_slider1::-ms-track,
input#before_after_slider2::-ms-track,
input#before_after_slider3::-ms-track,
input#before_after_slider4::-ms-track  {
border: none;
background-color: transparent;
height: 100vw;
left: 0;
top: -100vw;
width: 100%;
margin: 0;
padding: 0;
  outline: none;
position: relative;
cursor: col-resize;
color: transparent;
}
input#before_after_slider::-ms-fill-lower {
background-color: transparent;
}
input#before_after_slider1::-webkit-slider-thumb,
input#before_after_slider2::-webkit-slider-thumb,
input#before_after_slider3::-webkit-slider-thumb,
input#before_after_slider4::-webkit-slider-thumb  {
-webkit-appearance: none;
height: 100vw;
width: 0.5%;
opacity: 0;
}
input#before_after_slider1::-moz-range-thumb,
input#before_after_slider2::-moz-range-thumb,
input#before_after_slider3::-moz-range-thumb,
input#before_after_slider4::-moz-range-thumb {
-moz-appearance: none;
height: 100vw;
width: 0.5%;
opacity: 0;
}
input#before_after_slider1::-ms-thumb,
input#before_after_slider2::-ms-thumb ,
input#before_after_slider3::-ms-thumb ,
input#before_after_slider4::-ms-thumb 

{
height: 100vw;
width: 0.5%;
opacity: 0;
}
input#before_after_slider1::-ms-tooltip, 
input#before_after_slider2::-ms-tooltip ,
input#before_after_slider3::-ms-tooltip ,
input#before_after_slider4::-ms-tooltip {
display: none;
}
#before_after1::before,
#before_after2::before,
#before_after3::before,
#before_after4::before {
background: url(https://assets.codepen.io/191814/comparision.png) no-repeat
  scroll 0 center transparent;
background-size: contain;
content: " ";
float: right;
height: 100%;
margin-right: -34px;
position: relative;
top: 0;
width: 64px;
}
@keyframes first {
0% {
  width: 0%;
}
50% {
  width: 80%;
}
100% {
  width: 50%;
}
}
@-webkit-keyframes first {
0% {
  width: 0%;
}
50% {
  width: 80%;
}
100% {
  width: 50%;
}
}

/* Demo Page Stuff */
/* body {
margin: 0;
background: var(--before-after-background-color);
  font-family: helvetica;
padding-bottom:300px;
}


.parent-container {
width: 100%;
max-width: 2000px;
margin: 0 auto;
padding-top: 90px;
}

.two-column-grid {
display: grid;
grid-gap: 0px;
grid-template-rows: 1fr;
grid-template-columns: 1fr 1fr;
}

@media only screen and (max-width: 980px) {

.two-column-grid {
  grid-template-columns: 1fr;
}
h2 {
color: white;
text-transform: uppercase;
font-size: 21px;
letter-spacing: 1px;
line-height:1;
margin:0;
}
p {color:white;font-size:16px;}

} */


:root {
--before-after-aspect-ratio: 1 / 1; /* Square images, adjust as necessary */
--before-after-background-color: #1f1f1c;

/* Images for the first slider */
--before-image1: url('images/before2.png');
--after-image1: url('images/after2.png');

/* Images for the second slider */
--before-image2: url('images/before1.png');
--after-image2: url('images/after1.png');

/* Images for the third slider */
--before-image3: url('images/before3.png');
--after-image3: url('images/after3.png');

/* Images for the fourth slider */
--before-image4: url('images/before4.png');
--after-image4: url('images/after4.png');
}