mo-assets/src/files/scss/_personals.scss

.personals {

    &__tile-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-left: -10px;
    }

    &__tile {
        display: block;
        width: 33%;
        height: 100%;
        padding-left: 10px;
    }

    &__position {
        color: #929292;
        font-family: $fontcuprum;
        font-size: 14px;
        padding-left: 10px;
        display: flex;
        min-height: 40px;
        flex-direction: column;
        justify-content: flex-end;

        &--wide {
            padding-left: 72px;
            min-height: 0;
        }
    }

    &__item {
        border-radius: 32px 0 0 0 / 32px 0 0 0;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;
        height: 100%;
        width: calc(100% - 10px);
        margin-left: 10px;
    }
    &__link {
        text-decoration: none;
        position: relative;

        &--wide {
            &:before {
                display: none;
            }
        }
    }
    &__link:hover &__title {

    }
    &__link:hover &__details {
        border-color: #d2dee9 !important;
    }
    &__link:hover &__description {
    }
    &__link:hover:before {
    }
    &__title {
        background: #ebebeb;
        border-radius: 32px 0 0 32px;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;

        &:hover {
            text-decoration: none;
            background: #d2dee9;
        }

        &--wide {
            justify-content: space-between;

            @media (max-width: 768px) {
                display: block;
            }
        }
    }
    &__name {
        color: #004d7b;
        font-family: $fontcuprum;
        font-size: 15px;
        min-height: 63px;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 62px;

        &--wide {
            min-height: 41px;
        }
    }
    &__photo {
        width: 63px;
        height: 63px;
        border-radius: 50%;
        display: block;
        position: absolute;
        margin-left: -10px;
        z-index: 10;
        left: 0;
        top: 0;
    }
    &__details {
        border: 1px solid #ebebeb;
        border-top: none;
        height: calc(100% - 63px);
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding-top: 20px;
        margin-top: -20px;
        line-height: 1.2;

        &--wide {
            min-height: 23px;
        }

        &--no-borders {
            border: none;
        }
    }
    &__description {
        display: block;
        position: relative;
        font-size: 13px;
        color: #8e8e8e;
        padding: 8px 10px 3px 25px;

        &--wide {
            padding: 0 12px 0 62px;
            &:empty {
            }
        }
    }
    &__category {
        @extend .personals__description;
        padding-top: 1px;
        padding-bottom: 8px;
        min-height: 20px;
        color: #004d7b;
        background: url("data:image/gif;base64,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") 2px 50% no-repeat;

        &--wide {
            padding-left: 82px;
            background-position-x: 58px;

            @media (max-width: 768px) {
                display: none;
            }
            &-mobile {
                display: none;

                @media (max-width: 768px) {
                    display: block;
                }
            }
        }
    }

    &__contacts {
        display: block;
        margin-top: 10px;
        width: 100%;
        background: #ebebeb;
        padding-top: 5px;
        padding-left: 5px;
        padding-right: 5px;
    }

    &__client-schedule {
        margin-top: 10px;
        font-weight: 400;
        font-size: 15px;
        line-height: 1.3;
        font-family: $fontcuprum;
    }

    &__contact-name {
        color: #929292;
        font-size: 14px;
        font-family: $fontcuprum;
        margin-top: 10px;
        margin-bottom: 5px;
        line-height: 1;
    }

    &__contact-value {
        font-size: 16px;
        margin-bottom: 5px;
        font-family: $fontcuprum;
        line-height: 1;
    }
}