span.svg {
    
    display: inline-grid;
    
    grid-template-columns: auto;
    grid-template-rows: auto;
    
    justify-items: start;
    align-items: start;
    
    column-gap: 0.25rem;          /* distanca midis ikonës dhe përmbajtjes */
  }
    
  span.svg::before,         /* frame */
  span.svg::after {         /* icon */
    
    content: "";
    
    height: calc(var(--default-line-height) * 1em);     /* madhësia e pseudo-elementit */
    aspect-ratio: 1;
    
    grid-column: 1;
    grid-row: 1;
  }
  
  span.svg::before {

    background-color: transparent;        /* default background color */
  }

  span.svg::after {

    mask-size: 1em 1em;                   /* madhësia e imazhit */
    mask-position: center center;
    mask-repeat: no-repeat;

    background-color: currentColor;       /* default icon color */
  }
  
    span.svg.bg-brand-main::before {
      
      background-color: var(--colour-brand-main);
    }
    
    span.svg.fg-brand-main::after {
      
      background-color: var(--colour-brand-main);
    }
  
    span.svg.bg-brand-secondary::before {
      
      background-color: var(--colour-brand-secondary);
    }
    
    span.svg.fg-brand-secondary::after {
      
      background-color: var(--colour-brand-secondary);
    }
  
    span.svg.bg-brand-third::before {
      
      background-color: var(--colour-brand-third);
    }
    
    span.svg.fg-brand-third::after {
      
      background-color: var(--colour-brand-third);
    }
  
    span.svg.bg-brand-alt-blue::before {
      
      background-color: var(--colour-brand-alt-blue);
    }
    
    span.svg.fg-brand-alt-blue::after {
      
      background-color: var(--colour-brand-alt-blue);
    }
  
    span.svg.bg-bg-dark::before {
      
      background-color: var(--colour-bg-dark);
    }
    
    span.svg.fg-bg-dark::after {
      
      background-color: var(--colour-bg-dark);
    }
  
    span.svg.bg-bg-light::before {
      
      background-color: var(--colour-bg-light);
    }
    
    span.svg.fg-bg-light::after {
      
      background-color: var(--colour-bg-light);
    }
  
    span.svg.bg-bg-white::before {
      
      background-color: var(--colour-bg-white);
    }
    
    span.svg.fg-bg-white::after {
      
      background-color: var(--colour-bg-white);
    }
  
    span.svg.bg-bg-feedback::before {
      
      background-color: var(--colour-bg-feedback);
    }
    
    span.svg.fg-bg-feedback::after {
      
      background-color: var(--colour-bg-feedback);
    }
  
    span.svg.bg-text-dark::before {
      
      background-color: var(--colour-text-dark);
    }
    
    span.svg.fg-text-dark::after {
      
      background-color: var(--colour-text-dark);
    }
  
    span.svg.bg-text-light::before {
      
      background-color: var(--colour-text-light);
    }
    
    span.svg.fg-text-light::after {
      
      background-color: var(--colour-text-light);
    }
  
    span.svg.bg-text-white::before {
      
      background-color: var(--colour-text-white);
    }
    
    span.svg.fg-text-white::after {
      
      background-color: var(--colour-text-white);
    }
  
    span.svg.bg-rating-star::before {
      
      background-color: var(--colour-rating-star);
    }
    
    span.svg.fg-rating-star::after {
      
      background-color: var(--colour-rating-star);
    }
  
    span.svg.bg-list-bullet-included::before {
      
      background-color: var(--colour-list-bullet-included);
    }
    
    span.svg.fg-list-bullet-included::after {
      
      background-color: var(--colour-list-bullet-included);
    }
  
    span.svg.bg-border-light-gray::before {
      
      background-color: var(--colour-border-light-gray);
    }
    
    span.svg.fg-border-light-gray::after {
      
      background-color: var(--colour-border-light-gray);
    }
  
    span.svg.bg-whats-app::before {
      
      background-color: var(--colour-whats-app);
    }
    
    span.svg.fg-whats-app::after {
      
      background-color: var(--colour-whats-app);
    }
  
    span.svg.bg-box-shadow::before {
      
      background-color: var(--colour-box-shadow);
    }
    
    span.svg.fg-box-shadow::after {
      
      background-color: var(--colour-box-shadow);
    }