.f-show-xs, .f-show-xl, .f-row {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
}

.f-col {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.f-stretch-space {
    place-content: stretch space-between;
    align-items: stretch;
}


.f-start-start {
    place-content: start flex-start;
    align-items: start;
}

.f-start-space {
    place-content: start space-between;
    align-items: start;
}

.f-start-end {
    place-content: start flex-end;
    align-items: start;
}


.f-center {
    place-content: center;
    align-items: center;
}

.f-center-start {
    place-content: center flex-start;
    align-items: center;
}

.f-center-space {
    place-content: center space-between;
    align-items: center;
}

.f-center-end {
    place-content: center flex-end;
    align-items: center;
}


.f-end {
    place-content: flex-end;
    align-items: flex-end;
}

.f-end-start {
    place-content: end flex-start;
    align-items: end;
}

.f-end-space {
    place-content: end space-between;
    align-items: end;
}

.f-end-end {
    place-content: end flex-end;
    align-items: end;
}

@media screen and (max-width: 640px) {
    .f-show-xs {
        display: flex;
    }
    .f-show-xl {
        display: none;
    }
}

@media screen and (min-width: 641px) {
    .f-show-xs {
        display: none;
    }
    .f-show-xl {
        display: flex;
    }
}