.gsap-grid-sec,
.gsap-grid-sec2 {
width: 100%;
overflow: visible;
z-index: 2;
height: 200vh;
padding-left: 1rem;
padding-right: 1rem;
}

.gsap-grid-layout {
display: flex;
display: grid;
height: 100%;
width: 100%;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1rem!important;
transform-origin: center top;
}

.gsap-grid-col {
height: 100%;
}

.gsap-grid-col-content {
display: grid;
grid-template-rows: 50vh;
/* padding: 0 0 20vh; */
grid-gap: 1rem;
height: 100%;
}

.gsap-grid-image {
width: 100%;
position: relative;
overflow: hidden;
}

.gsap-grid-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

.gsap-grid-underlay {
position: absolute;
top: 0;
left: 0;
height: 105%;
width: 105%;
background-color: #00ade9;
transform: translateX(-110%);
}

.gsap-grid-overlay {
position: absolute;
top: 0;
left: 0;
height: 105%;
width: 105%;
background-color: #2E2E2D;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease-in-out;
padding: 1rem 2rem;
transform: translateX(-110%);
}

.gsap-grid-overlay > h2 {
color: #ffffff;
font-size: clamp(1.5em, 2.9vh, 36px);
overflow: hidden;
display: flex;
justify-content: center;
}

/* Version 2 */
.home-three-proj-cont {
	overflow-y: hidden;
}

.gsap-grid-sec2 {
    height: 150vh;
}

.gsap-grid-sec2 .gsap-grid-layout {
    grid-gap: 1rem!important;
}

.gsap-grid-sec2 .gsap-grid-col-content {
    grid-template-rows: 40vh;
}

/* Parallax Image */
.parallax-section {
height: 100vh;
width: 100%;
overflow: hidden;
top: 0;
transform-origin: center top;
}

.parallax-image {
height: 200vh;
width: 100%;
object-fit: cover;
will-change: transform;  
}

.spacer {
height: 20vh;
display: flex;
align-items: center;
justify-content: center;
}

/* Pin Row Sections */
.pin-section .section-content {
height: calc(100vh - 70px);
overflow: hidden;
display: grid;
grid-row-gap: 1rem;
grid-template-rows: 1fr 1fr;
}

.pin-content {
height: 100%;
display: grid;
grid-column-gap: 1rem;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
will-change: transform;
max-width: unset!important;
}

.pin-box {
height: 100%;
width: 100%;
max-width: unset!important;
padding: 0!important;
}

.pin-box > .col-inner {
    height: 100%;
}

.pin-box-inner {
    height: 100%;
    min-width: 90vw;
    max-height: calc((100vh - 70px) / 2);
}

.pin-box-inner .container {
    max-width: unset!important;
}