Estoy realizando un curso que incluye CSS responsive y al momento de realizar una tarea me solicita un Home con tarjetas, utilizando grid y adaptarlo con media query para tablet y celular. Lo que pasa es que al momento de implementar las media query en la pagina web no me las detecta. La idea es que al llegar a un max-widht de 768 se acomoden en dos columnas de dos tarjetas y al llegar al max-widht de 480 se haga una sola columna con las cuatro tarjetas una debajo de la otra
.card-container {
height: 100vh;
width: 100%;
background-color: #ffeedd;
justify-content: space-between;
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.card-container figure {
height: 400px;
width: 300px;
border: 3px solid black;
border-radius: 10px;
margin: 50px 30px;
}
.card-container figure img {
height: 100px;
width: 250px;
margin: 10px 20px 40px 20px;
}
.card-container h2 {
font-size: 2rem;
font-family: var(--font-family);
text-align: center;
}
.card-container p {
font-size: 1rem;
font-family: var(--font-family);
text-align: justify;
}
@media screen and (max-widht: 768px) {
.card-container {
grid-template-columns: repeat(2, 2fr);
}
}
@media screen and (max-widht: 480px) {
.card-container {
grid-template-columns: repeat(1, 1fr);
}
}
<body>
<section class="card-container">
<figure>
<img src="/images/est-cont.jpg" alt="contabilidad">
<h2>EL ESTUDIO</h2>
<p>Estudio Contable SERVACO, brinda un asesoramiento integral a Unipersonales y PYMES en toda la etapa
de su
vida comercial.</p>
</figure>
<figure>
<img src="/images/gest-aut.jpg" alt="gestoria">
<h2>GESTORÍA AUTOMOTOR</h2>
<p>Somos una prestigiosa gestoría automotor formada por un excelente equipo humano que abarca una amplia
lista de servicios para brindarle.</p>
</figure>
<figure>
<img src="/images/seg.jpg" alt="seguros">
<h2>SEGUROS</h2>
<p>Encontrarás una amplia variedad en seguros para personas y empresas: seguros de vida, pólizas de
hogar, auto o moto y más</p>
</figure>
<figure>
<img src="/images/novedades.jpg" alt="seguros">
<h2>NOVEDADES</h2>
<p>Te informamos cada día de las novedades impositivas a nivela nacional, provincial y municipal</p>
</figure>
</section>
</body>