/* Cruises-overzicht, /cruises/. Een HTML-boom voor alle breedtes. */

/* Deze hero is korter dan de standaard .dt-hero (86px kop); de titel hier
   mag daarom kleiner. Selector met element + klasse, want .dt-hero h1 in
   desktop.css/responsief.css heeft anders een hogere specificiteit dan een
   enkele klasse en zou deze override negeren. */
.dt-hero h1.cr-titel { font-size: 72px; }

.cr-regio-grid { grid-auto-rows: 1fr; }
.cr-regio-kaart { height: 240px; }
.cr-regio-naam { font-size: 22px; }

@media (max-width: 1024px) {
    .dt-hero h1.cr-titel { font-size: 48px; }
    .cr-regio-kaart { height: 190px; }
    .cr-regio-naam { font-size: 19px; }
}

@media (max-width: 720px) {
    .dt-hero h1.cr-titel { font-size: 32px; }
    .cr-regio-kaart { height: 150px; }
    .cr-regio-naam { font-size: 16px; }
}