/* =============================================
WORK PAGE – 1 LARGE IMAGE ON TOP + GRID BELOW
Only affects section with class "work-masonry"
Squarespace 7.1 – Gallery Type: Grid: Masonry
============================================= */
/* Turn off Squarespace's Masonry layout for this section */
.work-masonry .sqs-gallery-design-masonry .sqs-gallery {
position: static !important;
height: auto !important;
}
/* Make slides flow normally (no absolute positioning) */
.work-masonry .sqs-gallery-design-masonry .slide {
position: static !important;
top: auto !important;
left: auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* -------- GRID LAYOUT -------- */
/* 2-column grid, centered with nice spacing */
.work-masonry .sqs-gallery-design-masonry .sqs-gallery {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px !important;
max-width: 1100px;
margin: 0 auto;
padding: 40px 20px 60px;
}
/* FIRST IMAGE = HERO – spans both columns */
.work-masonry .sqs-gallery-design-masonry .slide:nth-child(1) {
grid-column: 1 / -1 !important;
}
/* Image styling */
.work-masonry .sqs-gallery-design-masonry .slide img {
width: 100% !important;
height: auto !important;
display: block !important;
object-fit: cover;
border-radius: 0;
}
/* -------- MOBILE: single column -------- */
@media (max-width: 700px) {
.work-masonry .sqs-gallery-design-masonry .sqs-gallery {
grid-template-columns: 1fr;
gap: 16px;
padding: 30px 16px 40px;
}
.work-masonry .sqs-gallery-design-masonry .slide:nth-child(1) {
grid-column: auto !important;
}
}
