---
id: 612ebcba99bfa46a15370b11
title: Paso 27
challengeType: 0
dashedName: step-27
---

# --description--

La regla-at (declaración CSS que comienza con el símbolo arroba) `@media`, también conocida como media query, se utiliza para aplicar CSS de forma condicional. Las media queries se utilizan comúnmente para aplicar CSS basado en el ancho del viewport utilizando las propiedades `max-width` y `min-width`.

En el siguiente ejemplo, el relleno se aplica a la clase `.card` cuando el viewport tiene un ancho de `960px` o inferior.

```css
@media (max-width: 960px) {
  .card {
    padding: 2rem;
  }
}
```

Agrega una media query que se aplicará cuando el viewport tenga `768px` de ancho o menos.

# --hints--

Debes agregar una nueva `@media` query.

```js
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 1);
```

Tu `@media` query debe tener un `max-width` de `768px`.

```js
assert(new __helpers.CSSHelp(document).getCSSRules('media')[0]?.media?.mediaText === '(max-width: 768px)');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Piano</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <div id="piano">
      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
      <div class="keys">
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>

        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>

        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
      </div>
    </div>
  </body>
</html>
```

```css
html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

#piano {
  background-color: #00471b;
  width: 992px;
  height: 290px;
  margin: 80px auto;
  padding: 90px 20px 0 20px;
  position: relative;
  border-radius: 10px;
}

.keys {
  background-color: #040404;
  width: 949px;
  height: 180px;
  padding-left: 2px;
}

.key {
  background-color: #ffffff;
  position: relative;
  width: 41px;
  height: 175px;
  margin: 2px;
  float: left;
  border-radius: 0 0 3px 3px;
}

.key.black--key::after {
  background-color: #1d1e22;
  content: "";
  position: absolute;
  left: -18px;
  width: 32px;
  height: 100px;
  border-radius: 0 0 3px 3px;
}

.logo {
  width: 200px;
  position: absolute;
  top: 23px;
}

--fcc-editable-region--

--fcc-editable-region--
```
