@media screen and (max-width: 900px) {
    .gridTypeColumnHeader, .gridTypeColumnValue, .clueTypeColumnHeader, .clueTypeColumnValue {
        display: none;
    }
}

@media screen and (max-width: 650px) {
    .difficultyColumnHeader, .difficultyColumnValue, .ratingColumnHeader, .ratingColumnValue {
        display: none;
    }
}

@media screen and (max-width: 500px) /* Breakpoint: MOBILE */ {
    .constructorColumnHeader, .constructorColumnValue {
        display: none;
    }
}

#filter .bc-filter-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 1em;
}

#filter .bc-filter-row > * {
    margin-right: 0.5em;
    white-space: nowrap;
}

#firstrow {
    display: flex;
    flex-direction: row;
}

#firstrow > .bc-filter-row {
    margin: 0;
}

#filterLayout {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

@media screen and (max-width: 500px) /* Breakpoint: MOBILE */ {
    #filterLayout {
        flex-direction: column;
    }

    #firstrow {
        flex-direction: column;
    }

    #firstrow > *:first-child {
        margin-bottom: 1em;
    }

    /* Move the find puzzles button below the filter */
    #filterLayout > div:nth-child(2) {
        margin-top: 1em;
        align-self: center;
    }
}