/* stylelint-disable selector-class-pattern */

.give-donor-dashboard-donor-info {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    grid-gap: 30px;
    padding: 26px 30px;
    border-bottom: 1px solid #e2e6ec;

    @media screen and (max-width: 920px) {
        grid-template-columns: 60px 1fr auto;
        grid-gap: 12px;
        padding: 12px;
    }
}

.give-donor-dashboard-donor-info__avatar {
    grid-column: 1;

    .give-donor-dashboard-donor-info__avatar-container {
        height: 140px;
        width: 140px;
        overflow: hidden;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--give-donor-dashboard-accent-color);

        @media screen and (max-width: 920px) {
            height: 60px;
            width: 60px;
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .give-donor-dashboard-donor-info__avatar-initials {
            font-size: 44px;
            font-weight: 600;
            color: #fff;

            @media screen and (max-width: 920px) {
                font-size: 24px;
            }
        }
    }
}

.give-donor-dashboard-donor-info__details {
    grid-column: 2;

    .give-donor-dashboard-donor-info__name {
        font-weight: 600;
        font-size: 22px;
        color: #424242;
        line-height: 1.4;
        margin: 0 0 4px 0;

        @media screen and (max-width: 920px) {
            font-size: 16px;
        }
    }

    .give-donor-dashboard-donor-info__detail {
        display: flex;
        align-items: center;
        font-size: 15px;
        line-height: 1.6;
        margin: 4px 0;
        color: #6b6b6b;

        @media screen and (max-width: 920px) {
            align-items: flex-start;
            font-size: 13px;
            margin: 6px 0;
            font-weight: 400;
            line-height: 1.2;
        }

        svg {
            margin-right: 8px;

            @media screen and (max-width: 920px) {
                margin-right: 4px;
                min-width: 18px !important;
            }
        }
    }
}

.give-donor-dashboard-donor-info__badges {
    grid-column: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}