/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 20 2025 | 15:43:52 */
/* Make the grid container a flex container */
.custom-flex-image-spacing-css .gutentor-grid-item-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important; /* This will center the items if fewer than full row */
    gap: 20px !important; /* Optional: adjust spacing between items */
}

.custom-flex-image-spacing-css .grid-row {
	margin-right: 0px !important;
	margin-left: 0px !important;
}

/* Make grid items maintain responsive widths */
.custom-flex-image-spacing-css .gutentor-grid-column {
    flex: 1 1 22% !important; /* Adjust based on desired column width, 22% for 4 items per row */
    max-width: 25% !important; /* Ensure max width doesn't exceed */
    box-sizing: border-box !important;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .custom-flex-image-spacing-css .gutentor-grid-column {
        flex: 1 1 45% !important; /* 2 items per row on medium screens */
        max-width: 45% !important;
    }
}

@media (max-width: 768px) {
    .custom-flex-image-spacing-css .gutentor-grid-column {
        flex: 1 1 90% !important; /* 1 item per row on small screens */
        max-width: 90% !important;
    }
}