main.page {
    background: #FBFBFB;
    min-height: 100vh;
    padding-top: 5px;
    position: relative;
}

header {
    position: relative;
}

main .person {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    position: relative;
}

main .person .person-close {
    position: absolute;
    left: 10px;
    top: 10px;
}

main .person .person-avatar {
    margin-right: 30px;
}
main .person .person-avatar img {
    width: 164px;
    height: 164px;
    border-radius: 50%;
}

main .person .person-detail .person-detail__name {
    font-size: 40px;
    line-height: 58px;
    font-weight: bold;
}

main .person .person-detail .person-detail__phone {
    font-size: 40px;
    line-height: 58px;
    font-weight: 400;
    margin-top: 10px;
}

main .person .person-detail .person-detail__city {
    font-size: 26px;
    line-height: 26px;
    font-weight: 400;
    margin-top: 10px;
}

main .person .person-detail .person-detail__network {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 550px;
    width: 100%;
    margin-top: 40px;
}

main .person .person-detail .person-detail__network img {
    margin-right: 30px;
}

main .person .person-photos {
    display: grid;
    grid-gap: 4px;
}

main .person .person-photos .person-photos__first {
    grid-column: 1;
    grid-row: 1 / span 2;
}
main .person .person-photos .person-photos__first img{
    max-width: 204px;
    max-height: 276px;
    width: 100%;
    height: 100%;

}

main .person .person-photos .person-photos__second {
    grid-column: 2;
    grid-row: 1;
}
main .person .person-photos .person-photos__second img{
    max-width: 179px;
    max-height: 134px;
    width: 100%;
    height: 100%;

}

main .person .person-photos .person-photos__third {
    max-width: 178px;
    max-height: 134px;
    width: 100%;
    height: 100%;
    grid-column: 2;
    grid-row: 2;
    position: relative;
}
main .person .person-photos .person-photos__third img{
    max-width: 178px;
    max-height: 134px;
    width: 100%;
    height: 100%;
}
main .person .person-photos .person-photos__third span {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    font-size: 48px;
    line-height: 48px;
    font-weight: bold;
    color: white;
    display: inline-table;
}

.person-photos__first img,
.person-photos__second img,
.person-photos__third img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}



@media screen and (max-width: 1080px) {
    main .person {
        flex-direction: column;
    }
    main .person .person-photos{
        max-width: 387px;
        width: 100%;
        margin: 30px auto 0;
    }
}
@media screen and (max-width: 820px) {
    main .person .flex{
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    main .person .flex .person-detail .person-detail__network{
       flex-wrap: wrap;
        justify-content: flex-start;
    }
    main .person .flex .person-detail .person-detail__network img{
        margin-top: 10px;
        margin-right: 15px;
    }

}
main .search-detail {
    display: grid;
    grid-gap: 27px;
    margin-top: 35px;
    margin-bottom: 35px;
    grid-template-columns: repeat(auto-fill, 420px);
    justify-content: center;
}
@media screen and (max-width: 820px) {
    main .search-detail {
        grid-template-columns: repeat(auto-fill, 350px);
    }
}
main .search-detail .box {
    max-height: 370px;
    height: fit-content;
}
.search-detail-title {
    padding: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.search-detail-title .flex{
    justify-content: space-between;
    align-items: center;
    color: #1A0038;
    font-weight: 600;
}
.search-detail-title .flex img{
    margin-right: 10px;
}
.search-detail-title img{
    width: 24px;
    height: 24px;
}
.search-detail-subtitle {
    background: #4316E40F;
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
}
.search-detail-subtitle span{
/*    width: 30%;*/
    color: #1A0038;
    font-weight: 700;
    font-size: 18px;
}
.search-detail-list.short {
    max-height: 230px;
}
.search-detail-list {
    height: 100%;
    max-height: 270px;
    overflow-y: scroll;
}
.search-detail-list__item {
    justify-content: space-between;
    align-items: center;
    display: flex;
    padding: 10px 0px;
}
.search-detail-list__item span{
    display: block;
/*    width: 30%;*/
    color: #1A0038;
    font-size: 18px;
    font-weight: 400;
    padding: 0px 10px;
}
.search-detail-list__item a, .search-detail-list__item{
    color: #4912ED;
    font-size: 18px;
    font-weight: 400;
}
.search-detail .accordion .search-detail-title .arrow {
    transform: rotate(270deg);
}
.search-detail .accordion.active .search-detail-title .arrow {
    transform: rotate(0deg);
}














/**
added CSSes after final meeting
*/


.wrapper-box {
    background: #D8E0ED;
    border-radius: 28px;
    padding: 18px;
}

.wrapper-box .search-detail {
    margin: 18px 0 0;
    grid-template-columns: repeat(auto-fill, 31.7%);
}
.wrapper-box .box.shadow {
    box-shadow: none;
}
.wrapper-box .person-photos {
    position: relative;
}
.wrapper-box .person-photos .person-photos__more {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    background: white;
    padding: 22px;
    border-radius: 44px;
    z-index:2;
    display: flex;
    justify-content: space-around;
    align-items:center;
    width: 200px;
}
.wrapper-box .person-photos .person-photos__more img {
    margin-right: 10px;
}
.wrapper-box .person-photos .person-photos__more p{
    font-size: 20px;
    color: #1A0038;
    font-weight: 700;
}
.wrapper-box .users .users-detail {
    margin-bottom: 3px;
}
.sub-title {
    color: #4912ED;
    font-size:24px;
    font-weight: 700;
    line-height: 48px;
    margin: 34px 0 16px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.sub-title img {
    margin-right: 15px;
}