main {
	--srv-tls-icn-s: 2.5rem;  
}

.srv-icn {
    font-size: var(--srv-tls-icn-s);
}

/* Service icon inside a filled circle (ServiceIcon snippet) */
.srv-icn-crl {
    --srv-icn-crl-s: 5rem;
    --srv-icn-crl-bg: var(--buttons);
    --srv-icn-crl-clr: var(--white);

    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    inline-size: var(--srv-icn-crl-s);
    block-size: var(--srv-icn-crl-s);
    border-radius: 50%;
    background-color: var(--srv-icn-crl-bg);

    &::before {
        content: '';
        inline-size: 60%;
        block-size: 60%;
        background-color: var(--srv-icn-crl-clr);
        -webkit-mask: var(--srv-icn-src) center / contain no-repeat;
        mask: var(--srv-icn-src) center / contain no-repeat;
    }

    &.sml {
        --srv-icn-crl-s: 3rem;
    }
}