.playerContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    padding: 10px;
    gap: 10px;
    min-height: 70px;
}

.red {
    order: 1;
}

.yellow {
    order: 2;
    flex-direction: row-reverse;
}

.blue {
    order: 3;
}

.green {
    order: 4;
    flex-direction: row-reverse;
}

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .playerContainer {
        padding: 8px;
        gap: 8px;
        min-height: 60px;
    }
}

/* Mobile (less than 768px) */
@media (max-width: 767px) {
    .playerContainer {
        padding: 6px;
        gap: 6px;
        min-height: 50px;
    }
}