.legacy-section {
background-color: #FAF9F6; 
width: 100%;
padding: 120px 0;
overflow: hidden;
}
.legacy-wrapper {
display: flex;
flex-direction: column;
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
gap: 60px;
} .legacy-title {
font-family: 'Cormorant Garamond', serif;
font-weight: 500;
font-size: 64px;
color: #000;
margin: 0 0 30px 0;
text-transform: uppercase;
}
.legacy-desc {
font-family: 'General Sans', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.6;
color: #333;
margin: 0 0 40px 0;
max-width: 500px;
}
.btn-about-us {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 0 35px;
height: 56px;
border: 1px solid #000;
border-radius: 50px;
text-decoration: none;
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
font-size: 20px;
color: #000;
transition: background-color 0.3s, color 0.3s;
}
.btn-about-us:hover {
background-color: #000;
color: #fff;
} .legacy-images-col {
display: grid; grid-template-columns: 67% 31%; 
grid-template-rows: 1fr 1fr; justify-content: space-between; row-gap: 4px; width: 100%;
}
.large-img {
grid-column: 1 / 2;
grid-row: 1 / 3; width: 100%;
height: 100%;
}
.small-img-top {
grid-column: 2 / 3;
grid-row: 1 / 2; width: 100%;
height: 100%;
}
.small-img-bottom {
grid-column: 2 / 3;
grid-row: 2 / 3; width: 100%;
height: 100%;
} .legacy-img-wrap {
overflow: hidden; 
background-color: #faf9f6; 
border-radius: 4px; 
} .legacy-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover; display: block;
transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1); 
} .slide-down-img {
transform: translateY(-100%); 
}
.slide-up-img {
transform: translateY(100%); 
}  .legacy-section.is-inview .slide-down-img,
.legacy-section.is-inview .slide-up-img {
transform: translateY(0);
} @media (min-width: 1024px) {
.legacy-wrapper {
flex-direction: row;
align-items: center;
padding: 0 5%;
gap: 80px;
}
.legacy-images-col {
width: 50%;
}
.legacy-text-col {
width: 50%;
padding-left: 40px;
}
}  @media (max-width: 1023px) {
.legacy-section {
padding: 60px 0;
}
.legacy-wrapper {
gap: 40px; } .legacy-title {
font-size: 48px; margin-bottom: 20px;
}
.legacy-desc {
font-size: 16px; margin-bottom: 30px;
} .btn-about-us {
font-size: 20px; width: 157px; height: 56px; padding: 0; justify-content: center; }
}