.contact__card {
    position: fixed;
    right: 16px;
    bottom: 16px;

    width: 360px;
    background: var(--color-brand);
    padding: 24px;

    display: flex;
    flex-direction: column;
    gap: 16px;

    z-index: 200;

    transition: all 0.3s ease;
}



.contact__card-wrapper {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 200;
    transition: all 0.3s ease;
}



.contact__label{
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}


.contact__divider{
    height:1px;
    background:rgba(0,0,0,.15);
}


.contact__card-row{
    display:flex;
    flex-direction:column;
    gap:4px;
}


.contact__category{
    font-size:.7rem;
    text-transform:uppercase;
    letter-spacing:.12em;
    opacity:.6;
}


.contact__card a{
    color:var(--color-black);
    text-decoration:none;
    font-size:1rem;
    font-weight:500;
}




.contact__card.is-small {
    opacity: 0.95;
    padding: 24px;
    width: 250px;
}


.contact__card.is-small .contact__divider,
.contact__card.is-small .contact__category,
.contact__card.is-small .contact__social {
    display:none;
}



@media (max-width: 768px){

    .contact__card{
        left:0px;
        right:0px;
        bottom:0px;

        width:auto;
        padding:20px;
    }
    .contact__card .contact__social {
        display: none;
    }

}


@media (max-width:768px){

    .contact__card.is-small{

        left:0px;
        right:0px;
        bottom:0px;

        width:auto;

        padding:18px 18px;
    }

    .contact__card.is-small .contact__divider,
    .contact__card.is-small .contact__label,
    .contact__card.is-small .contact__category,
    .contact__card.is-small .contact__social,
    .contact__card.is-small .contact__phone{
        display:none;
    }

}