---
id: 612ec19d5268da7074941f84
title: ในใใใ 32
challengeType: 0
dashedName: step-32
---
# --description--
Logical operators can be used to construct more complex media queries. The `and` logical operator is used to query two media conditions.
For example, a media query that targets a display width between 500px and 1000px would be:
```css
@media (min-width: 500px) and (max-width: 1000px){
}
```
Add another `@media` rule to apply if the browser window is wider than `769px` but smaller than `1199px`.
# --hints--
You should add a new `@media` query.
```js
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 2);
```
Your `@media` query should have a `min-width` of `769px` and a `max-width` of `1199px`.
```js
const mediaText = new __helpers.CSSHelp(document).getCSSRules('media')[1]?.media?.mediaText;
assert(mediaText === '(max-width: 1199px) and (min-width: 769px)' || mediaText === '(min-width: 769px) and (max-width: 1199px)');
```
# --seed--
## --seed-contents--
```html
Piano
