@use '../../../styles/tools/functions';
@use '../../../styles/settings/colours';
@use '../../../styles/settings/variables';

.Filter {
    margin-bottom: functions.pxRem(50);
}

.FilterFields {
    display: flex;
    flex-wrap: wrap;
    gap: functions.pxRem(20);
}

.FilterSelect {
    width: 100%;

    @media all and (min-width: functions.em(425)) {
        width: calc(50% - #{functions.pxRem(10)});
    }

    @media all and (min-width: functions.em(520)) {
        width: auto;
    }
}

.List {
    row-gap: functions.pxRem(40);
    opacity: 1;
    transition: opacity 0.3s;

    @media all and (min-width: functions.em(768)) {
        row-gap: functions.pxRem(50);
    }

    &--Loading {
        opacity: 0.5;
        pointer-events: none;
    }
}

.Column {
    width: 100%;
    
    @media all and (min-width: functions.em(768)) {
        width: 50%;
    }
}

.ColumnInner {
    height: 100%;
}

.WorkCard {
    height: 100%;
}