.row-fix, .row-fix > * {
    min-width: 0;
}

.controls-row {
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.control-item {
    display: block;
}

@media (max-width: 599.98px) {
    .controls-row {
        flex-wrap: wrap;
    }

    .control-item {
        width: 100%;
    }

    .medium-btn {
        width: 100%;
    }
}

.word-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    align-items: center;
}

.word-title {
    grid-column: 2;
}

.word-audio {
    grid-column: 3;
    justify-self: center;
}

@media (max-width: 899.98px) {
    .word-grid {
        grid-template-columns: 1fr auto;
    }

    .word-title {
        grid-column: 1 / -1;
    }

    .word-audio {
        grid-column: 2;
    }
}

@media (max-width: 599.98px) {
    .word-grid {
        grid-template-columns: 1fr;
    }

    .word-title {
        grid-column: 1;
    }

    .word-audio {
        grid-column: 1;
        justify-self: center;
    }
}

.drag-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable both-edges;
}

.row-nowrap {
    min-width: 0;
}

.cards-row > * {
    min-width: 0;
}

.uniform-card {
    --card-w: clamp(220px, 42vw, 320px);
    flex: 0 0 var(--card-w);
    width: var(--card-w); /
    height: auto;
}

@media (max-width: 599.98px) {
    .uniform-card {
        --card-w: clamp(220px, 80vw, 280px);
        padding: 12px 16px;
    }
}

.medium-btn {
    white-space: nowrap;
}

.drag-scroll::-webkit-scrollbar {
    height: 12px;
}

.drag-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,.3);
    border-radius: 6px;
}