/*
 * Fallback values are set here for every property that Elementor
 * controls via selectors, because Elementor may not output CSS
 * for controls still at their default value. The Elementor selectors
 * use {{WRAPPER}} which gives them higher specificity, so they
 * cleanly override these when they do fire.
 */

/*
 * Elementor containers use flexbox. The widget element is a flex item
 * with no intrinsic width (grid children are absolutely positioned).
 * Without these rules the flex item collapses and 1fr columns = 0px.
 */
.elementor-widget-sfg_staggered_grid {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
}

.sfg-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    width: 100%;
}

.sfg-cell {
    position: relative;
    overflow: hidden;
    height: 300px;
}

.sfg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    object-fit: contain;
    object-position: center center;
    transition-property: opacity;
    transition-duration: 1000ms;
    transition-timing-function: ease-in-out;
    will-change: opacity;
}