@layer components {
.contact-phone {
    display: grid;
    min-width: 0;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--color-brand-orange);
    border-radius: var(--radius-control);
    color: var(--color-brand-orange);
    text-decoration: none;
}

.contact-phone--default {
    font: 700 24px/1.2 var(--font-family-primary);
    letter-spacing: 0;
}

.contact-phone__icon {
    display: grid;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-control);
    background: var(--color-brand-orange);
    color: var(--color-accent-contrast);
    place-items: center;
}

.contact-phone__svg {
    width: 28px;
    height: 28px;
}

}