/* Card grids centre their last row.
   CSS Grid leaves a lone final item hard against the first column, so these
   become flex rows: wrapping plus justify-content centres whatever is left over.
   Selectors carry the element name so they also beat the catalogue page's
   inline <style>, which would otherwise win on source order. */

/* ---- expedition cards: catalogue, featured, and the live trips grid ------ */
div.grid--3[data-astro-cid-wsxlbhv5],
div.grid--3[data-astro-cid-jdovvxl7]{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:1.5rem;
}
div.grid--3[data-astro-cid-wsxlbhv5] > *,
div.grid--3[data-astro-cid-jdovvxl7] > *{
    flex:0 1 calc((100% - 3rem) / 3);
    min-width:280px;
}

/* ---- highlights and departure dates: two up ----------------------------- */
ul.exp__highlights[data-astro-cid-dp5z3flg],
div.exp__dates[data-astro-cid-dp5z3flg]{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:1rem;
}
ul.exp__highlights[data-astro-cid-dp5z3flg] > li,
div.exp__dates[data-astro-cid-dp5z3flg] > div{
    flex:0 1 calc(50% - .5rem);
    min-width:240px;
}

/* ---- day cards --------------------------------------------------------- */
div.days{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:1.35rem;
}
div.days > .day-card{
    flex:0 1 calc((100% - 2.7rem) / 3);
    min-width:250px;
}

@media(max-width:600px){
    div.grid--3[data-astro-cid-wsxlbhv5] > *,
    div.grid--3[data-astro-cid-jdovvxl7] > *,
    ul.exp__highlights[data-astro-cid-dp5z3flg] > li,
    div.exp__dates[data-astro-cid-dp5z3flg] > div,
    div.days > .day-card{flex-basis:100%;min-width:0}
}