.icon-component {
  display: flex;
  overflow: clip;
  flex-direction: column;
  gap: var(--spacing-sm);
  align-items: center;
  justify-content: center;

  border-radius: calc(var(--radius-md) * 2);
  flex-shrink: 0;
  container-name: icon;
  container-type: inline-size;



  & .icon {
    font-family: var(--icon-font-family);
    font-size: clamp(3rem, 80cqw, 20rem);
    line-height: 1;
    font-weight: var(--icon-weight-lg);
    font-variation-settings:
      'FILL' var(--icon-fill),
      'GRAD' var(--icon-grade);
    font-optical-sizing: auto;

  }

  &[data-style="a"] {

    color: var(--color-icon-base);
  }

  &[data-style="b"] {

    color: var(--color-icon-base-b);
  }

  &[data-style="c"] {

    color: var(--color-icon-base-c);
  }
}






@keyframes grow {
  from {
    transform: translateY(10dvh);
    filter: blur(0px) hue-rotate(50deg);
    --icon-grade: -50;
   
    

  }

  to {
    transform: translateY(0);
    filter: blur(0) hue-rotate(0);
    --icon-grade: 200;
   
  
  }
}