Display grid não aplicado

Front-end CSS
#1

Bom dia, pessoal! Tudo bem?

Estou iniciando agora na parte do front end e estou com um problema.
Tenho o seguinte código html e css

<!DOCTYPE html>

<html lang="pt-BR">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>To-do | Sua lista de tarefas</title>

    <link rel="preconnect" href="https://fonts.gstatic.com">

    <link rel="stylesheet" href="/style/main.css">

    <link rel="stylesheet" href="/style/lading-page.css">

    <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;700&display=swap" rel="stylesheet">

</head>

<body id="page-landing">

    <img src="/images/lading-page-image.svg" alt="hero-image" class="hero-image">

    <div id="container">

        <div class="logo-container">

            <h1>TO-DO</h1>

            <h2>Um novo jeito de anotar suas tarefas</h2>

        </div>

    </div>

    <div class="buttons-container">

        <a href="#" class="sign-in">Entrar</a>

        <a href="#" class="sign-up">Cadastrar</a>

    </div>

</body>

</html>

Css:

#page-landing {
background-color: var(--color-primary);
}

.logo-container h1 {
display: block;
text-align: center;
margin-top: 2rem;
color: var(--font-color);
font: 600 3rem Archivo;
}

.logo-container h2 {
display: block;
text-align: center;
margin-top: 2rem;
font: 400 1.2rem Archivo;
}

.hero-image {
max-width: 700px;
width: 100%;
margin-top: 4rem;
margin-bottom: 4rem;
padding: 0 30px;
}

.buttons-container{
display: flex;
justify-content: center;
margin-top: 4rem;

}

.buttons-container a {
text-decoration: none;
color: var(--font-color);
font: 600 1rem Archivo;
border-radius: 1rem;
display: flex;
justify-content: center;
align-items: center;
}

.buttons-container a.sign-in {
height: 40px;
width: 145px;
background: var(--sign-in-button);
display: flex;
margin-right: 1.6rem;
}

.buttons-container a.sign-up {
height: 40px;
width: 145px;
background: var(--sign-up-button);
display: flex;

}

@media (max-width: 699px) {
:root {
    font-size: 89%;
}
}

@media (min-width: 1100px) {
#page-lading #container {
    max-width: 1100px;
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
    grid-template-rows: 350px 1fr;
}

.hero-image {
    width: 40%;
}
}

a partir do @media (min-width: 1100px) eu tento aplicar o display grid porém ele não é aplicado, alguém poderia me informar o porque?

#2

Vc ja inspecionou o elemento pra ver se nao é aplicado msm?

#3

Bom, resolvi testar aqui, e isso ta acontecendo por erro de digitação.

O correto é #page-landing e você colocou: #page-lading

Trecho correto:

#page-landing #container {
    max-width: 1100px;
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
    grid-template-rows: 350px 1fr;
}
#4

Muito obrigado pela ajuda, as vezes certas coisas óbvias passam batido.