/* Masonry grid styling with simplified approach */
.excuse-masonry-grid {
    --excuse-masonry-gap: 16px; /* Default for mobile */
    --excuse-masonry-gap-desktop: 40px; /* Default for desktop */
    width: 100%;
    position: relative;
}

/* Default styling for masonry items */
.excuse-item {
    width: 100%; /* Full width on mobile */
    margin-bottom: var(--excuse-masonry-gap);
}

/* Responsive masonry grid */
@media (min-width: 1024px) {
    .excuse-masonry-grid {
        --excuse-masonry-gap: 40px; /* Larger gap for tablets and up */
    }
    
    .excuse-item {
        width: calc(50% - var(--excuse-masonry-gap) / 2); /* Two columns with dynamic gutter */
    }
}

/* Support for more columns on larger screens */
@media (min-width: 768px) {
    .excuse-item {
        width: calc(100% / var(--excuse-columns, 2) - var(--excuse-masonry-gap) + (var(--excuse-masonry-gap) / var(--excuse-columns, 2)));
    }
}

/* Masonry initialized state */
.masonry-initialized .excuse-item {
    /* margin-bottom: 0; Let masonry handle the spacing */
}

/* CSS for images to ensure they load correctly */
.excuse-item img {
    display: block;
    max-width: 100%;
    height: auto;
}