@media (max-width: 1023px) { .home__vignettes { margin-top: 60px; } } @media (min-width: 1024px) { .home__vignettes { margin-top: 80px; } } .home__countries { display: grid; gap: 20px; } @media (min-width: 1024px) { .home__countries { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 640px) and (max-width: 1023px) { .home__countries { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 639px) { .home__countries { grid-template-columns: repeat(1, 1fr); } } @media (min-width: 640px) and (max-width: 1023px) { .home__countries>*:nth-child(7) { grid-column: 1 / 3; } } @media (min-width: 1024px) { .home__countries>*:nth-child(7) { grid-column: 2 / 3; } } .home__countries__item { height: 100%; display: flex; overflow: hidden; text-align: center; flex-direction: column; background-color: white; border-radius: var(--border-radius); box-shadow: var(--box-shadow-light); } .home__countries__item figure { margin: 0; } .home__countries__item figure picture img { width: 100%; height: 150px; object-fit: cover; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .home__countries__item__text { padding: 1rem; background-color: var(--background-white-color); } .home__countries__item__text__title { margin-bottom: 0.5rem; } .home__countries__item__text__description { font-size: 0.875rem; color: var(--text-gray-color); min-height: 110px; } .home__asfinag, .home__nemzeti { min-height: 300px; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: var(--background-light-gray-color); } @media (max-width: 639px) { .home__asfinag__logo, .home__nemzeti__logo { width: 40vh; } } .text-light-blue { color: var(--light-blue-color); } /* Homepage query-builder widget wrapper (React app mounts inside .query-builder-view). */ .query-builder-section { padding: 24px 0; } .query-builder-section__container { max-width: 1152px; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; } /* Space reservation for the query-builder React mount (#query-builder). The widget renders client-side, so without a reserved height the mount collapses to the loader and the whole page below it jumps down once React paints (CLS ~0.18 on phones). The card is a fixed chrome block (header, subtitle, date inputs, CTA, divider, footer) plus a 2-per-row country grid, so the reserved height is `chrome + rows * row-height`. `--qb-country-rows` / `--qb-country-count` come from QueryBuilderComponent, because the number of sellable countries differs per market (6 or 7 today). The pixel values mirror the widget's own styles in react/apps/query-builder (src/App.css, src/components/CountryButton.css) — keep them in sync when the card's paddings, the tile size or the grid gap change there. This file is auto-loaded into for home/index only (see LiquidContentHelper#load_view_specific_stylesheet), which is where the widget lives. If {% query_builder %} is ever placed on another page, move these rules to that view's stylesheet too — without them the mount simply isn't reserved and the shift returns. */ .query-builder-view { /* card + border minus the country grid, with the grid's trailing row gap folded out */ --qb-chrome: 324px; /* CountryButton 50px + 10px grid row-gap */ --qb-row: 60px; min-height: calc(var(--qb-chrome) + var(--qb-country-rows, 4) * var(--qb-row)); } /* Phones: .QueryBuilder__Card drops to 20px padding, the tiles to 46px and the grid gap to 8px, and the title/subtitle wrap onto a second line (see the max-width:480px block in react/apps/query-builder/src/App.css). */ @media (max-width: 480px) { .query-builder-view { --qb-chrome: 355px; --qb-row: 54px; } } /* Very narrow phones: the country grid collapses to a single column, so every country is its own row rather than two per row. */ @media (max-width: 339px) { .query-builder-view { min-height: calc(var(--qb-chrome) + var(--qb-country-count, 7) * var(--qb-row)); } } /* Centre the loader inside the reserved box instead of pinning it to the top. */ .query-builder-view__placeholder { display: flex; align-items: center; justify-content: center; min-height: inherit; }