.details-hover-section {
background-color: #ffffff;
width: 100%;
overflow: hidden;
}
.details-title {
font-family: 'Cormorant Garamond', serif;
font-weight: 500;
color: #000;
margin: 0;
text-transform: uppercase; 
line-height: 1.1;
}
.details-description {
font-family: 'General Sans', sans-serif;
font-weight: 400;
color: #333;
line-height: 1.6;
}
.details-img {
object-fit: cover;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
} @media (min-width: 1024px) {
.details-hover-section {
position: relative;
height: 1059px; 
}
.details-gallery-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 100%;
max-width: 1600px;
height: 100%; 
} .details-text-container {
position: absolute;
top: 90px; 
left: 50%;
transform: translateX(-50%); 
width: 45%; 
text-align: center;
z-index: 20;
pointer-events: none;
}
.details-title { font-size: 80px; }
.details-description {
font-size: 16px;
margin: 25px auto 0;
max-width: 550px;
} .details-img {
position: absolute;
pointer-events: none;
opacity: 1;
clip-path: inset(50% 50% 50% 50%); 
transition: clip-path 0.5s ease-out;
}
.details-hover-section:hover .details-img {
clip-path: inset(0% 0% 0% 0%); 
transition: clip-path 0.7s cubic-bezier(0.77, 0, 0.175, 1);
}
.details-hover-section:not(:hover) .details-img {
transition-delay: 0s !important;
} .details-img-center {
width: 35.8%; 
height: 71.2%; 
left: 50%;
bottom: -100px; 
transform: translateX(-50%); 
z-index: 10; 
transition-delay: 0s; 
}
.details-hover-section:hover .details-img-center {
transform: translateX(-50%);
transition-delay: 0s;
}
.details-img-tl, .details-img-bl, .details-img-tr, .details-img-br {
width: 21.5%; 
height: 42.6%; 
z-index: 5; 
}
.details-img-tl { left: 2%; top: 180px; }
.details-hover-section:hover .details-img-tl { transition-delay: 0.15s; }
.details-img-tr { right: 2%; top: 180px; }
.details-hover-section:hover .details-img-tr { transition-delay: 0.15s; }
.details-img-bl { left: 2%; bottom: -70px; }
.details-hover-section:hover .details-img-bl { transition-delay: 0.25s; }
.details-img-br { right: 2%; bottom: -70px; }
.details-hover-section:hover .details-img-br { transition-delay: 0.25s; }
} @media (max-width: 1023px) {
.details-hover-section {
padding: 60px 0;
height: auto;
}
.details-gallery-wrapper {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
padding: 0 20px;
height: auto;
} .details-text-container {
position: relative;
grid-column: 1 / -1; 
order: 0; 
text-align: center;
width: 100%;
margin-bottom: 40px;
}
.details-title { font-size: 48px; }
.details-description {
font-size: 16px;
margin: 15px auto 0;
} .details-img {
position: relative;
width: 100%;
height: auto; clip-path: inset(0% 0% 0% 0%); 
transition: none; } .details-img-tl { order: 1; aspect-ratio: 344/451; }
.details-img-tr { order: 2; aspect-ratio: 344/451; }
.details-img-center { 
order: 3; 
grid-column: 1 / -1; 
aspect-ratio: 574/755;
margin: 10px 0; 
}
.details-img-bl { order: 4; aspect-ratio: 344/451; }
.details-img-br { order: 5; aspect-ratio: 344/451; }
}