@media (min-width: 1024px) {
body {
overflow-y: hidden !important;
}
}
.single-project-wrapper {
width: 100%; height: calc(100dvh - 80px); 
background-color: #FAF9F6;
padding-top: 0; box-sizing: border-box;
overflow: hidden; 
}
.sp-scroll-container {
display: flex;
height: 100%;
overflow-x: auto;
overflow-y: hidden;
align-items: center;
}
.sp-scroll-container::-webkit-scrollbar {
display: none;
} .sp-info-panel {
flex: 0 0 40vw; 
height: 100%;
padding: 20px 60px 40px 60px; 
display: flex;
flex-direction: column;
justify-content: flex-start;
box-sizing: border-box;
overflow-y: auto; } .sp-info-panel::-webkit-scrollbar {
display: none;
}
.sp-go-back {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: 'Cormorant Garamond', serif;
font-weight: 600; 
font-size: 24px;
color: #000;
text-decoration: none;
border: 1px solid #000;
border-radius: 50px;
padding: 10px 25px;
align-self: flex-start;
transition: background-color 0.3s, color 0.3s;
flex-shrink: 0;
}
.sp-go-back:hover {
background-color: #000;
color: #fff;
}
.sp-content {
margin-top: 60px;
max-width: 500px;
margin-bottom: 40px; }
.sp-category {
font-family: 'General Sans', sans-serif;
font-weight: 500; 
font-size: 16px;
color: #666;
}
.sp-divider {
width: 100%;
height: 1px;
background-color: #D6D6D6;
border: none;
margin: 15px 0 20px 0;
}
.sp-title {
font-family: 'Cormorant Garamond', serif;
font-weight: 500; 
font-size: 72px;
color: #000;
line-height: 1.1;
margin: 0 0 20px 0;
text-transform: uppercase;
}
.sp-desc {
font-family: 'General Sans', sans-serif;
font-weight: 400; 
font-size: 16px;
color: #333;
line-height: 1.6;
margin: 0;
} .sp-badge {
position: relative; 
margin-top: auto; width: 120px;
height: 120px;
flex-shrink: 0; }
.sp-badge .spin-animation {
width: 100%;
height: 100%;
animation: spin 15s linear infinite;
display: block;
filter: invert(1); }
.sp-badge .static-center-logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30px;
height: auto;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
} .sp-featured-image {
flex: 0 0 55vw; 
height: 100%;
padding: 0; 
}
.sp-main-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
} .sp-gallery-content {
display: flex;
height: 100%;
padding: 40px; 
box-sizing: border-box;
gap: 40px; 
}
.sp-gallery-content .wp-block-gallery,
.sp-gallery-content .blocks-gallery-grid {
display: flex !important;
flex-wrap: nowrap !important;
gap: 40px !important;
margin: 0 !important;
height: 100% !important; width: max-content !important; 
}
.sp-gallery-content .wp-block-image {
flex: 0 0 auto !important; 
height: 100% !important;
width: auto !important; max-width: none !important; 
margin: 0 !important;
}
.sp-gallery-content .wp-block-image img {
height: 100% !important;
width: auto !important; max-width: none !important; 
object-fit: cover;
} @media (max-height: 900px) and (min-width: 1024px) {
.sp-info-panel {
padding: 20px 40px 30px 40px; 
}
.sp-content {
margin-top: 30px; 
margin-bottom: 20px;
}
.sp-title {
font-size: 48px; margin: 0 0 15px 0;
}
.sp-badge {
width: 90px; height: 90px;
}
} @media (max-width: 1023px) {
.single-project-wrapper {
height: auto;
overflow-y: auto;
}
.sp-scroll-container {
flex-direction: column;
height: auto;
overflow-x: hidden;
}
.sp-info-panel {
width: 100%;
padding: 40px 20px;
flex: none;
}
.sp-title {
font-size: 48px;
}
.sp-badge {
margin-top: 40px;
}
.sp-featured-image {
width: 100%;
height: 60vh;
flex: none;
}
.sp-gallery-content {
width: 100%;
padding: 20px;
flex-direction: column;
height: auto;
}
.sp-gallery-content .wp-block-gallery {
flex-direction: column !important;
height: auto !important;
}
.sp-gallery-content .wp-block-image img {
width: 100% !important;
height: auto !important;
}
}