.mira_sidebar_c1-layout{
    --background-color: var(--secondary-stone);
    --text-color: var(--primary-black);
    --icon-color: var(--black-80);
    --icon-background: var(--paper-80);
    --icon-hover-background: var(--paper-20);
}

.mira_sidebar_c1-layout{
    background-color: var(--background-color);
    color: var(--text-color);
    padding: max(1.25rem, calc(2 * var(--su)));
    border-radius: max(.5rem, calc(.5 * var(--su)));
}

.mira_sidebar_c1-layout .pk-heading{
    margin-bottom: max(1rem, calc(1 * var(--su)));
}

.mira_sidebar_c1-layout .socials{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: max(.5rem, calc(0.5 * var(--su)));
    margin-bottom: max(1rem, calc(1 * var(--su)));
}

.mira_sidebar_c1-layout .socials a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: max(2rem, calc(2.25 * var(--su)));
    height: max(2rem, calc(2.25 * var(--su)));
    border-radius: max(.25rem, calc(.25 * var(--su)));
    background-color: var(--icon-background);

    transition: background-color 180ms ease-out;
}

.mira_sidebar_c1-layout .socials a:is(:hover, :active, :focus){
    background-color: var(--icon-hover-background);
}

.mira_sidebar_c1-layout .socials a span{
    display: block;
    width: max(1rem, calc(1.25 * var(--su)));
    height: max(1rem, calc(1.25 * var(--su)));
    background-color: var(--icon-color);
    mask: var(--icon-url) no-repeat center / contain;
}

.mira_sidebar_c1-layout .content{
    margin-bottom: max(1.5rem, calc(1.5 * var(--su)));
}