/* css/tarieven.css */

/* De container waar de 3 pakketten in zitten (Regel 10 in je PHP) */
.grid-3 {
    display: flex;
    flex-direction: row; /* Desktop: netjes naast elkaar */
    justify-content: center;
    gap: 25px; /* Ruimte tussen de 3 vakken */
    width: 100%;
    box-sizing: border-box;
}

/* De individuele pakketkaarten (Regel 12 in je PHP) */
.card-pakket {
    flex: 1; /* Verdeelt de kolommen gelijkmatig */
    min-width: 280px;
    box-sizing: border-box;
}

/* MAGIE VOOR MOBIEL: Zodra het scherm smaller wordt dan 950px */
@media screen and (max-width: 950px) {
    .grid-3 {
        flex-direction: column; /* Dwingt de vakken strak onder elkaar */
        align-items: center;
        gap: 30px; /* Iets meer ruimte tussen de vakken onderling */
    }
    
    .card-pakket {
        width: 100% !important; /* Pak de volledige breedte van het scherm */
        max-width: 450px; /* Voorkomt dat ze op grotere telefoons té breed worden */
    }
}