.subject-icon {
    --subject-icon-size: 42px;
    --subject-icon-emoji: 1.15rem;
    width: var(--subject-icon-size);
    height: var(--subject-icon-size);
    border-radius: 50%;
    background: var(--subject-icon-bg, var(--zt-info-bg));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--subject-icon-bg, #DBEAFE) 55%, transparent);
}

.subject-icon__emoji {
    font-size: var(--subject-icon-emoji);
    line-height: 1;
    display: block;
}

.subject-icon--xs {
    --subject-icon-size: 24px;
    --subject-icon-emoji: 0.72rem;
}

.subject-icon--sm {
    --subject-icon-size: 32px;
    --subject-icon-emoji: 0.95rem;
}

.subject-icon--md {
    --subject-icon-size: 42px;
    --subject-icon-emoji: 1.15rem;
}

.subject-icon--lg {
    --subject-icon-size: 48px;
    --subject-icon-emoji: 1.35rem;
}

.subject-icon--xl {
    --subject-icon-size: clamp(72px, 9vw, 88px);
    --subject-icon-emoji: clamp(1.8rem, 3vw, 2.35rem);
}

.subject-icon--hero {
    --subject-icon-size: clamp(88px, 10vw, 110px);
    --subject-icon-emoji: clamp(2.25rem, 4vw, 3rem);
}

.subject-icon--square {
    border-radius: 12px;
}

.subject-icon--square.subject-icon--sm {
    border-radius: 8px;
}