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

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

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

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

.atalhoPerfil{
   --cor-atalho: #218cbc;
   display: grid;
   grid-template-columns: 54px minmax(0, 1fr) 34px;
   min-height: 92px;
   align-items: center;
   gap: 12px;
   border: 1px solid #d6e8f5;
   border-radius: 18px;
   padding: 14px;
   color: #17345f;
   text-decoration: none;
   background: rgba(255,255,255,.96);
   box-shadow: 0 7px 20px rgba(30,75,110,.07);
   transition: transform .17s ease, border-color .17s ease, box-shadow .17s ease;
}

.atalhoPerfil:hover,
.atalhoPerfil:focus-visible{
   border-color: var(--cor-atalho);
   outline: 0;
   box-shadow: 0 12px 28px color-mix(in srgb, var(--cor-atalho) 20%, transparent);
   transform: translateY(-3px);
}

.atalhoPerfilIcone{
   display: grid;
   width: 54px;
   height: 54px;
   place-items: center;
   border-radius: 15px;
   background: color-mix(in srgb, var(--cor-atalho) 13%, white);
}

.atalhoPerfilIcone img{
   width: 30px;
   height: 30px;
   object-fit: contain;
}

.atalhoPerfilGeoo .atalhoPerfilIcone img{
   width: 36px;
   height: 36px;
}

.atalhoPerfil strong{
   min-width: 0;
   font-size: 1rem;
   line-height: 1.25;
}

.atalhoPerfilSeta{
   display: grid;
   width: 34px;
   height: 34px;
   place-items: center;
   border-radius: 50%;
   color: var(--cor-atalho);
   font-size: 1.25rem;
   background: color-mix(in srgb, var(--cor-atalho) 10%, white);
}

.atalhoPerfil2{ --cor-atalho: #7c3aed; }
.atalhoPerfil3{ --cor-atalho: #0f9f78; }
.atalhoPerfil4{ --cor-atalho: #e07a16; }
.atalhoPerfil5{ --cor-atalho: #2563eb; }
.atalhoPerfil6{ --cor-atalho: #dc3b66; }
.atalhoPerfil7{ --cor-atalho: #0891b2; }

.atalhoPerfilCodePlay,
.atalhoPerfilGeoo,
.atalhoPerfilGame{
   --cor-atalho: #087db5;
}

.atalhoPerfilCodePlay{
   border-color: #0787c2;
   background: #55c2f2;
   box-shadow: 0 9px 24px rgba(8,125,181,.27);
}

.atalhoPerfilGeoo,
.atalhoPerfilGame{
   border-color: #69bfe5;
   background: #bee8fa;
}

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

   .atalhoPerfil{
      min-height: 78px;
      grid-template-columns: 46px minmax(0, 1fr) 32px;
      padding: 10px 12px;
   }

   .atalhoPerfilIcone{
      width: 46px;
      height: 46px;
      border-radius: 13px;
   }

   .atalhoPerfilIcone img{
      width: 26px;
      height: 26px;
   }

   .atalhoPerfilGeoo .atalhoPerfilIcone img{
      width: 31px;
      height: 31px;
   }
}