/* ================================
1. Fixed 4:5 Frames for Videos & Images
=============================== */
.collection-type-portfolio .sqs-gallery-item,
.collection-type-portfolio .sqs-video-wrapper,
.collection-type-portfolio .sqs-block-embed {
max-width: 1600px; /* fixed max width on desktop */
width: 100%; /* still responsive */
aspect-ratio: 4 / 5; /* maintain 4:5 ratio */
margin: 20px auto; /* center horizontally + spacing */
overflow: hidden;
position: relative;
}
/* Make content inside fill the frame */
.collection-type-portfolio .sqs-gallery-item img,
.collection-type-portfolio .sqs-video-wrapper iframe,
.collection-type-portfolio .sqs-block-embed iframe {
width: 100% !important;
height: 100% !important;
object-fit: cover;
}
/* ================================
2. Reduce spacing between stacked blocks
=============================== */
.collection-type-portfolio .sqs-block + .sqs-block {
margin-top: 10px !important;
}
/* ================================
3. Reduce Section Padding
=============================== */
.collection-type-portfolio .sqs-section {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
/* ================================
4. Mobile Adjustments
=============================== */
@media screen and (max-width: 768px) {
.collection-type-portfolio .sqs-gallery-item,
.collection-type-portfolio .sqs-video-wrapper,
.collection-type-portfolio .sqs-block-embed {
width: 90vw !important; /* nearly full width on mobile */
aspect-ratio: 4 / 5; /* maintain 4:5 ratio */
}
.collection-type-portfolio .sqs-block + .sqs-block {
margin-top: 8px !important;
}
}