.c-component-name {
// Setting a min (mobile first)
@include bolt-mq(xsmall) {
background-color: red;
}
// Setting a max (desktop first)
@include bolt-mq($until: xsmall) {
background-color: blue;
}
// Setting a range (adaptive)
@include bolt-mq($from: medium, $until: xlarge) {
background-color: yellow;
}
// Setting orientation or other media queries
@include bolt-mq($from: xlarge, $until: xxxlarge, $and: '(orientation: portrait)') {
background-color: green;
}
}