/* ------------------------------------------------------------------
   Static-clone fix.

   On the live Wix site the service-card grid is laid out by Wix's
   JavaScript on every resize: the cards are position:absolute and their
   left/top values are recomputed in JS. This static clone has no Wix
   runtime, so that layout froze at the width it was captured (1920px)
   and overflowed at every other width.

   The rules below reproduce the live behaviour in plain CSS. Measured
   from the live site: cards are always 470x268px with a 40px gap,
   centred, showing as many columns as fit (3 at >=1600px, 2 below),
   with the row never dropping under 2 columns (1020px min width).
   ------------------------------------------------------------------ */

fluid-columns-repeater {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, 470px) !important;
    gap: 40px !important;
    justify-content: center !important;
    align-content: start !important;
    height: auto !important;
    min-width: 1020px;
    /* The repeater sits in a negative-margin gutter (margin:-20px, so it runs
       40px wider than the viewport). Wix's JS insets the cards 20px inside it;
       horizontal centring already absorbs the side gutters, but the top one
       has to be restored explicitly or every card rides 20px too high. */
    padding-top: 20px !important;
}

fluid-columns-repeater > * {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 470px !important;
    height: 268px !important;
    margin: 0 !important;
}

/* The card's own inner wrappers were sized to the frozen layout too. */
fluid-columns-repeater > * > * {
    width: 100% !important;
    height: 100% !important;
}

/* NOTE: the ancestors' baked pixel heights are left alone on purpose. They were
   captured while the grid was 3 columns tall (1192px), which is exactly the
   live height at >=1450px wide, so the page matches the original there.
   Forcing them to height:auto instead pulled the grid ~40px up into the
   section heading, so we set the reflowed heights explicitly instead.

   Measured on the live site, the 3-column -> 2-column reflow adds exactly
   310px at every level (repeater 1192 -> 1502, section 1316.34 -> 1626.34).
   The reflow happens between 1440px and 1600px wide: three 470px columns plus
   two 40px gaps need 1490px of track, and the repeater runs 40px wider than
   the viewport, so 3 columns survive down to a 1450px viewport. */
@media (max-width: 1449px) {
    fluid-columns-repeater,
    #comp-maaq5ev41,
    #comp-maaq5ev41_wrapper {
        height: 1502px !important;
    }

    #comp-maaq5eut,
    #Containerkry4n,
    [data-mesh-id^="comp-maaq5eut"],
    [data-mesh-id^="Containerkry4n"] {
        height: 1626.34px !important;
    }
}