.characters-slider > .content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium);
}

.characters-slider > .content .characters-slider-items {
    display: flex;
    gap: var(--spacing-medium); /* 1rem */
    padding: var(--spacing-small); /* 0.75rem */
    overflow: hidden; /* Jouw voorkeur */
    max-width: 100%;
    background-color: var(--background-color);
    flex-wrap: wrap; /* Laat items wrapen */
}

.characters-slider > .content .characters-slider-item {
    flex: 1 1 30%; /* Standaard ~33.33%, maar iets smaller voor 3 items */
    height: 400px; /* Consistentie */
}

@media (max-width: 900px) {
    .characters-slider > .content .characters-slider-item {
        flex: 1 1 45%; /* ~50%, maar iets smaller voor 2 items */
    }
}

@media (max-width: 600px) {
    .characters-slider > .content .characters-slider-item {
        flex: 1 1 90%; /* ~100%, maar iets smaller voor 1 item */
        max-width: 100%; /* 1 item per rij */
    }
}