/* Practice Icon (Figma: DS › Practice Icon): círculo roxo 40px + ícone branco 24px centralizado.
   Usado na lista de práticas da home e nos cards de "Meu jeito de construir".
   Ícones exportados já com o círculo (ex.: busca) entram como imagem única de 40px. */
.practice-icon {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.practice-icon img {
  position: absolute;
}

.practice-icon img:first-child {
  inset: 0;
}

.practice-icon img + img {
  top: 8px;
  left: 8px;
}

/* --cropped: o asset do Figma é maior que o frame de 40px (ex.: sol, 64px com moldura Gray em volta);
   como no Figma, o frame recorta e o ícone fica deslocado −12px, aparecendo só o desenho central. */
.practice-icon--cropped {
  overflow: hidden;
}

.practice-icon--cropped img:first-child {
  inset: auto;
  top: -12px;
  left: -12px;
}

/* --outline: sem o círculo, ícone em roxo sobre fundo transparente, centralizado no frame de 40px
   com 2px de margem (ícone de 36px). Traço ajustado nos SVGs para continuar com 2px nesse tamanho.
   (cards de "Meu jeito de construir", pedido da usuária) */
.practice-icon--outline {
  display: grid;
  place-items: center;
}

.practice-icon--outline img {
  position: static;
}

/* --zoom: ícone exportado com a moldura de 40px (ex.: busca, desenho em 22 de 40 unidades);
   ampliado para o desenho ocupar 36px, com 2px de margem como os demais (40 × 36/22 = 65,45px) */
.practice-icon--zoom {
  overflow: hidden;
}

.practice-icon--zoom img:first-child {
  position: absolute;
  top: -12.73px;
  left: -12.73px;
  width: 65.45px;
  height: 65.45px;
  max-width: none;
}