﻿
@media screen and (min-width : 1200px) {

    .contacts_table .contact_card > i.bi {
        margin-left: auto;
    }

    .contacts_table .contact_card .pfp img {
        width: 60px;
        height: 60px !important;
        margin-bottom: 5px;
        border-radius: 50px;
        object-fit: cover;
    }

    .contacts_table .contact_card,
    .contacts_table .contact_detail {
    }

    .contacts_table .contact:hover .contact_card,
    .contacts_table .contact.open .contact_card {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

    .contact_card.leader_card {
        grid-column: span 2;
        flex-flow: row;
        gap: 1em;
    }

    .contact_card.leader_card .contact_socials:not(:empty) {
        border-top: 1px solid #d0d0d0;
        margin-top: 8px;
        padding-top: 8px;
    }

    .contact_detail {
        flex-grow: 1;
    }

    .contact_detail .contact_socials a {
        word-wrap: anywhere;
    }

    .contact_detail .btn {
        padding: 11px 17px;
    }

/*    .contact_detail .btn + .btn {
        margin-top: 5px;
    }*/

    .contact_detail .pull-right {
        float: none !important;
        display: block;
    }
}

/* |<---->|                      */
/* |  xs  |  sm  |  md  |  lg  | */
@media screen and (max-width: 767px) {

    .contacts_table .contact .pfp img {
        min-width: 45px;
    }

    .contact_card {
        border-radius: 50px;
    }

    .contacts_table {
        grid-template-columns: repeat(1, 1fr);
        gap: 5px;
    }

    .contacts_table table,
    .contacts_table table tbody,
    .contacts_table table tr,
    .contacts_table table td {
        display: block;
        width: 100%;
    }

    .contacts_table .contact_card {
        flex-basis: 50%;
    }
}