[Dúvida] Meu estilo não está sendo aplicado na lista

import React from 'react';
import './style.scss';

function Lista () {
    const tarefas = [{
        tarefa: 'React',
        tempo: '02:00:00'
    }, {
        tarefa: 'Javascript',
        tempo: '01:00:00'
    }, {
        tarefa: 'TypeScript',
        tempo: '03:00:00'
    }]
    return(
        <aside className="listaTarefas">
          <h2> Estudos do dia </h2>
            <ul>
                {tarefas.map((item, index) => (
                 <li key={index} className="item">
                    <h3> {item.tarefa} </h3>
                    <span> {item.tempo} </span>
                 </li>
                ))}
            </ul>
        
        </aside>
    )
}

export default Lista;

.listaTarefas {
    grid-area: tarefas;
    height: 100%;
  
    h2 {
      font-size: 1.25rem;
      margin-bottom: 12px;
    }
  
    ul {
      max-height: 350px;
      overflow-y: scroll;
      scrollbar-width: thin;
    }
  
    @media screen and (min-width:1280px) {
      
      h2{
        text-align: center;
        font-size: 2.25rem;
        margin-bottom: 24px;
      }
  
      ul {
        overflow: auto;
        max-height: 500px;
      }
    }
  }
  
  .item {
    background-color: #4D4D4D;
    border-radius: 8px;
    box-shadow: 2px 4px 4px #0000009F;
    padding: 12px;
    margin-bottom: 8px;
    position: relative;
    cursor: pointer;
  
    h3 {
      margin-bottom: 8px;
      word-break: break-all;
    }
  
    span {
      color: #D0D0D0;
    }
  
    @media screen and (min-width:1280px) {
      font-size: 1.8rem;
    }
  }
  
  .itemSelecionado {
    background-color: #292929;
    box-shadow: 2px 4px 4px #0000009F inset;
  }
  
  .itemCompletado {
    background-color: #566F42;
    cursor: auto;
  
    .concluido {
      display: block;
      background-image: url('../../assets/img/check-mark.svg');
      background-repeat: no-repeat;
      background-size: 38px 38px;
      position: absolute;
      top: 50%;
      right: 12px;
      transform: translateY(-50%);
      width: 42px;
      height: 43px;
    }
  }