/* Testhomepage (index-test.html): zonder menu, met twee kolommen. Laadt na index.css. */

/* Twee kolommen naast elkaar vanaf 900px (samen 90% van de schermbreedte, zoals .row), daaronder onder elkaar */
.kolommen{display:grid;grid-template-columns:1fr;gap:var(--blokruimte-kort);align-items:start}
@media (min-width:900px){.kolommen{grid-template-columns:1fr 1fr;gap:var(--between);width:max(100%,90vw);margin-inline:calc((100% - max(100%,90vw)) / 2)}}
.kolom{display:flex;flex-direction:column;gap:var(--blokruimte-kort);container-type:inline-size;min-width:0}
/* Kop boven elke kolom: past in de kolombreedte ("Brikki's verhaaltjes" is ongeveer 9,6 keer de lettergrootte) */
.kolomkop{font-size:min(max(33.7px,7.099cqw),100cqw / 10.2);white-space:nowrap}
/* Blokken in een kolom gedragen zich als blokken in een rij */
.kolom>.block{display:flex;flex-direction:column;container-type:inline-size;margin-top:0;--knop:min(24px,100cqw / 18.64);--knophoog:2.667}
.kolom>.block>.knop,.kolom>.block>.knop-rij{margin-top:auto}
.kolom>.block>.knop{align-self:flex-start}
.kolom>.block>p:has(+ .knop,+ .knop-rij){margin-bottom:22px}
.kolom>.block>p+.knop,.kolom>.block>p+.knop-rij{margin-top:0}
.kolom>.block .knop{white-space:nowrap;min-height:2.667em;padding:.5em 1.417em;border-radius:1.333em;font-size:var(--knop)}
.kolom>.block .knop-rij .luister{width:calc(var(--knop) * var(--knophoog));height:calc(var(--knop) * var(--knophoog))}
.kolom>.block .knop-rij{flex-wrap:wrap-reverse}
@media (max-width:440px){
  .kolom>.block{--knop:min(22px,100cqw / 18.17);--knophoog:2.909}
  .kolom>.block .knop{min-height:2.909em;padding:.545em 1.182em;border-radius:1.455em}
}
@media (max-width:380px){.kolom>.block{--knop:min(22px,100cqw / 17.62)}.kolom>.block .knop{padding:.545em .909em}}

/* Een kolom alleen (Brikki's verhaaltjes): even breed als een kolom, in het midden */
@media (min-width:900px){.kolommen-enkel{grid-template-columns:calc((100% - var(--between)) / 2);justify-content:center}}