section{padding:64px 0}
.lede{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:44px;align-items:end;margin-bottom:24px}
.lede h2{white-space:nowrap}
.lede p{font-size:1.1rem;color:var(--ink-2)}
@media (max-width:820px){.lede{grid-template-columns:1fr;gap:14px}.lede h2{white-space:normal}}

/* destinations grid, scales to many */
.dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dcard{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--paper);transition:opacity .2s}
.dcard.dim{opacity:.35}
.dcard .media{position:absolute;inset:0}.dcard .media-wide{display:none} /* the wide picture is for phones only */
.dcard .media::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,24,20,.8),rgba(20,24,20,0) 60%)}
.dcard .cap{position:absolute;left:16px;right:16px;bottom:14px}
.dcard h3{font-size:1.9rem;margin-bottom:6px}
.dcard .meta{display:flex;gap:6px;flex-wrap:wrap;font-size:12.5px}
.dcard .meta b{font-weight:500;background:rgba(245,240,230,.16);padding:3px 8px;border-radius:3px}
.dcard.soon{opacity:.55}.dcard.soon .cap h3::after{content:" — soon";font-size:1rem;color:rgba(245,240,230,.7)}
:lang(fr) .dcard.soon .cap h3::after{content:" — bientôt"} /* the one French word kept in CSS */
@media (max-width:820px){.dgrid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){
  .dgrid{grid-template-columns:1fr;gap:14px}
  .dcard{aspect-ratio:16/10}
  .dcard.wide{aspect-ratio:var(--ratio)}.dcard.wide .media{display:none}.dcard.wide .media-wide{display:block} /* the whole picture, uncropped */
}