/* ==========================================================================
   MAHSEN: pagina/website-laten-maken-antwerpen.css
   Wat alleen /website-laten-maken-antwerpen draagt, naast publiek.css
   (design-system.md §6 en §10). pages/website-laten-maken-antwerpen hangt dit
   blad zelf, via partials/stijlblad in @push('stijl'), zodat het ná
   publiek.css komt en de andere pagina's het niet laden.

   Onder dezelfde regels als publiek.css, en op zijn tokens: geen eigen
   tokenblok, geen letter, geen basis (OntwerpregelsTest). Elke selector draagt
   een klasse die alleen deze pagina heeft; de prijskaart in de kop, de
   doorlooptijd, de kolommen, de stippen, de tijdlijn en wat eronder staat (de
   alinea over de administratie en de uitloop, met de klassen van de home)
   staan in publiek.css, want een andere pagina draagt ze ook.
   ========================================================================== */

/* Wat er in een startwebsite zit: de stippen van publiek.css, met meer lucht
   tussen de regels, want een regel beslaat op een gsm drie tot vijf regels
   tekst. Zo doen /software-op-maat en /website-onderhoud het met hun lijsten. */
.startlijst { gap: 1rem; }

/* De twee vragen onder "Moet ik er zelf iets van kennen?" (zelf aanpassen, en
   een bouwdoos): los in de sectie en niet in een kolom, dus met hun eigen
   lucht erboven, en zo breed als de alinea erboven, zodat ze op een breed
   scherm één kolom lezen. */
.zelf-vragen { max-width: var(--maat); margin-top: 2rem; }

/* De twee voorbeeldsites op een gsm (§6, Gsm-afdruk): een effen rand van 6px
   ebben met radius 28, het beeld radius 21, zonder notch, knoppen of schaduw
   (§1). Naast elkaar, ook op een gsm, en hoogstens 26rem breed: breder werden
   ze op een breed scherm hoger dan de lijst ernaast. De tweede staat lager, zodat
   het een paar is en geen rij van twee gelijke kaarten. */
.gsm-paar { max-width: 26rem; }
.gsm-rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; align-items: start; }
.gsm { overflow: hidden; border: 6px solid var(--ebben); border-radius: 28px; background: var(--ebben); }
.gsm img { width: 100%; border-radius: 21px; }
.gsm + .gsm { margin-top: 2rem; }