/* Core alignment framework override */
.wp-site-blocks {
    max-width: 100%;
    margin: 0 auto;
    overflow-x: hidden;
    /* FIX: Adds a beautiful 40px padding boundary gap on the left and right */
    padding-left: 40px !important;
    padding-right: 40px !important;
    box-sizing: border-box;
}

/* Ensure the full width grid calculates its width inside your new border gaps */
.narrative-story-grid .wp-block-post-template.is-layout-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; 
    gap: 0px !important; /* Keeps the zero spacing strictly between the adjacent images */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Responsive adjustment so the left/right gaps look balanced on smaller phone screens */
@media screen and (max-width: 768px) {
    .wp-site-blocks {
        padding-left: 15px !important;  /* Slightly smaller gap on mobile so images stay clear */
        padding-right: 15px !important;
    }
}