Aonde está o problema com esse grid

Pessoal, não consigo obter o resultado dos cartões. Já fiz a revisão desse código várias vezes e não encontrei o problema. Segue o html:

   <main class="mainCard">
        <h2 class="pageTittle">Início</h2>
        <article class="card cardSpot">
            <img src="img/banner-mobile_1.png" alt="banner mobile" class="cardImage">
            <div class="cardContent">
                <p class="cardHighlight">Vídeo em destaque</p>
                <p classs="cardTittle">HZC Tittle</p>
                <p class="cardProfile">Bruno Lopez</p>
                <p class="cardInfo cardInfoTime">33 minutos</p>
                <p class="cardInfo cardInfoView">33 visualizações</p>
                <button class="cardButton cardButtonPlay cardButtonHighlight">Assistir agora</button>
            </div>
        </article>
        <section class="section">
            <h3 class="tittleSection">Vídeos mais vistos</h3>
            <article class="card">
                <img src="img/video_1.png" alt="HZC Vídeo" class="cardImage">
                <div class="cardContent">
                    <p class="cardProfile">Bruno Lopez</p>
                    <p classs="cardTittle">HZC Tittle</p>
                    <p class="cardInfo cardInfoTime">33 minutos</p>
                    <button class="cardButton cardButtonPlay" aria-label="Assistir agora"></button>
                </div>
            </article>

        </section>

    </main>
    <script src="index.js"></script>    
</body>
</html>

E o CSS

@font-face {
    font-family: 'icones';
    src: url(../font/icones.ttf);
}

.headerMenu i::before {
    content: "\e904";
    font-size: 24px;
}

.headerNotification i::before {
    content: "\e906";
    font-size: 24px;

}

.headerLogo {
    width: 40px;
}

.sideMenu {
    display: Flex;
    flex-direction: column;
}

.sideMenu {
    display: flex;
    flex-direction: column;
    background-color: #15191C;
    width: 75vw;
    height: 100vh;
    position: absolute;
    left: -100vw;
    transition: .35s;
}

.sideMenuActive {
    left: 0;
    transition: .35s;
}

.sideBarLogo {
    width: 118px;
    align-self: center;
    padding: 16px;
}

.sideBarLink {
    height: 64px;
    color: #95999C;
    padding-left: 64px;
    display: flex;
    align-items: center;
}

.sideBarLink:hover {
    color: #FFFFFF;
    padding-left: 56px;
    border-left: 8px solid #FFFFFF;
}

.sideBarLink::before {
    content: "";
    width: 24px;
    height: 24px;
    font-size: 24px;
    position: absolute;
    left: 24px;
}

.sideBarLinkInicio::before {
content: "\e902";
}

.sideBarLinkVideos::before {
    content: "\e90e";
}

.sideBarLinkPicos::before {
    content: "\e909";
}

.sideBarLinkIntegrantes::before {
    content: "\e903";
}

.sideBarLinkCamisas::before {
    content: "\e900";
}

.sideBarLinkPinturas::before {
    content: "\e90a";
}

.mainCard {
    padding: 24px 16px;
    display: grid;
    gap: 16px;
}

.cardSpot {
    margin-bottom: 16px;
}

.pageTittle {
    font-size: 1.5rem;
    font-weight: 700;
}

.tittleSection {
    font-size: 1.2rem;
    font-weight: 700;
}

.card {
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
    background-color: #2C343A;
}

.cardContent {
    padding: 16px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
}

.cardHighlight {
    grid-column: span 2;
}

.cardTittle {
    font-size: 1.2rem;
    font-weight: 700;
    grid-column: span 2;
}

.cardProfile {
    color: #95999C;
    font-size: 0.9rem;
    grid-column: span 2;
}

.cardInfo {
    display: flex;
    align-items: center;
    color: #95999C;
}

.cardInfoTime::before {
    content: "\e90c";
    margin-right: 8px;
}

.cardInfoView::before {
    content: "\e90b";
    margin-right: 8px;
}

.cardButton {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0480DC;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 0.9rem;
    justify-self: flex-end;
}

.cardButtonPlay::before {
    content: "\e90b";
    font-size: 24px; 
}

.cardButtonHighlight {
    width: 100%;
    grid-column: span 2;
}

.cardButtonHighlight::before {
    margin: 8px;
}