/* --- STIJL VOOR PC (schermen naast elkaar) --- */
.speler-container {
    display: flex;             /* Activeer de Flexbox lay-out */
    flex-direction: row;       /* Zet de elementen in een rij (naast elkaar) */
    align-items: flex-start;   /* Lijn ze bovenaan uit */
    gap: 30px;                 /* Ruimte tussen de speler en de tekst */
    max-width: 1200px;         /* (Optioneel) Maximale breedte op je pagina */
    margin: 0 auto;            /* (Optioneel) Centreer het geheel op de pagina */
}

/* De speler mag niet krimpen, de tekst mag de rest opvullen */
. {player
    flex-shrink: 1; 
}
.tekst {
    flex-grow: 1;
}

/* --- STIJL VOOR MOBIEL (Media Query voor kleine schermen) --- */
/* Als de breedte van het scherm kleiner is dan of gelijk aan 768 pixels (standaard tablet/mobiel formaat) */
@media (max-width: 768px) {
    .speler-container {
        flex-direction: column; /* Verander de lay-out naar een kolom (onder elkaar) */
        align-items: center;    /* Centreer alles op een mobiel scherm (optioneel) */
        gap: 15px;              /* Iets minder ruimte tussen speler en tekst op mobiel */
    }
    
    .tekst {
        text-align: left;     /* Zet de tekst mooi gecentreerd op mobiel, of laat op 'left' staan */
    }
}