.niveisResumoCabecalho{
   display: grid;
   width: min(1120px, 100%);
   justify-items: center;
   gap: 5px;
   text-align: center;
}

.niveisResumoCabecalho > span{
   color: #218cbc;
   font-size: .8rem;
   font-weight: 800;
   letter-spacing: .12em;
   text-transform: uppercase;
}

.niveisResumoCabecalho h2{
   margin: 0;
   color: #1e3a5f;
   font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.niveisResumoCabecalho p{
   margin: 0;
   color: #64748b;
}

.niveisResumoGrade{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   width: min(1120px, 100%);
   gap: 16px;
}

.cardNivelResumo{
   position: relative;
   display: grid;
   grid-template-areas:
      'titulo titulo titulo'
      'icones quantidade seta';
   grid-template-columns: 92px minmax(0, 1fr) auto;
   grid-template-rows: auto 1fr;
   min-height: 164px;
   align-items: center;
   column-gap: 16px;
   row-gap: 12px;
   border: 1px solid #cfe4f4;
   border-radius: 20px;
   padding: 16px;
   color: #17345f;
   text-decoration: none;
   background: rgba(255,255,255,.94);
   box-shadow: 0 8px 24px rgba(30, 75, 110, .08);
   transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.cardNivelHomeschooling{
   border: 3px solid #0faaa5;
   background: linear-gradient(145deg,#fff 35%,#e5fbf8 100%);
   box-shadow: 0 10px 28px rgba(15,170,165,.2);
}

.nivelHomeschoolingSelo{
   position: absolute;
   top: 10px;
   right: 10px;
   border-radius: 999px;
   padding: 4px 9px;
   color: #087f7a;
   font-size: .72rem;
   font-weight: 900;
   background: #d9f8f4;
}

.cardNivelResumo:hover,
.cardNivelResumo:focus-visible{
   border-color: #218cbc;
   outline: 0;
   box-shadow: 0 14px 32px rgba(33, 140, 188, .18);
   transform: translateY(-3px);
}

.cardNivelIcones{
   position: relative;
   display: block;
   grid-area: icones;
   width: 92px;
   height: 82px;
}

.cardNivelIcones img{
   position: absolute;
   top: calc(var(--indice) * 5px);
   left: calc(var(--indice) * 14px);
   width: 62px;
   height: 62px;
   border: 3px solid #fff;
   border-radius: 14px;
   object-fit: contain;
   background: #f8fbfe;
   box-shadow: 0 5px 14px rgba(15, 23, 42, .14);
}

.cardNivelSemCapa{
   display: grid;
   width: 72px;
   height: 72px;
   place-items: center;
   border-radius: 18px;
   color: #218cbc;
   font-size: 2.5rem;
   background: #e8f6fc;
}

.cardNivelInformacoes{
   display: contents;
}

.cardNivelInformacoes strong{
   grid-area: titulo;
   width: 100%;
   min-width: 0;
   font-size: 1.2rem;
   line-height: 1.2;
   hyphens: none;
   overflow-wrap: normal;
   text-align: center;
   word-break: normal;
}

.cardNivelInformacoes small{
   display: grid;
   grid-area: quantidade;
   width: fit-content;
   place-items: center;
   border-radius: 999px;
   padding: 5px 10px;
   color: #1769aa;
   font-size: 1rem;
   font-weight: 700;
   line-height: 1.25;
   text-align: center;
   background: #eaf6fc;
}

.cardNivelSeta{
   display: grid;
   grid-area: seta;
   width: 36px;
   height: 36px;
   place-items: center;
   border-radius: 50%;
   color: #218cbc;
   font-size: 1.4rem;
   background: #edf8fd;
}

@media (max-width: 560px){
   .niveisResumoGrade{
      grid-template-columns: 1fr;
   }

   .cardNivelResumo{
      grid-template-areas: 'icones informacoes seta';
      grid-template-columns: 78px minmax(0, 1fr) auto;
      grid-template-rows: 1fr;
      min-height: 108px;
      padding: 13px;
   }

   .cardNivelInformacoes{
      display: grid;
      grid-area: informacoes;
      min-width: 0;
      gap: 7px;
   }

   .cardNivelInformacoes strong{
      grid-area: auto;
      text-align: left;
   }

   .cardNivelInformacoes small{
      grid-area: auto;
   }

   .cardNivelIcones{
      width: 78px;
      height: 70px;
   }

   .cardNivelIcones img{
      width: 54px;
      height: 54px;
      left: calc(var(--indice) * 11px);
   }
}