.contacts {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .contacts__title {
        margin-bottom: 40px;
        text-align: center;
    }

    .title_contacts-person-page {
        font-size: var(--font-size-6xl);
    }

    .person {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(24px, 5vw, 60px);
        justify-items: center;

        .description {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: var(--color-dark);
            font-size: var(--font-size-l);
            line-height: var(--line-height-m);
            font-weight: var(--font-weight-light);
            text-align: center;

            .name {
                font-weight: var(--font-weight-medium);
            }

            img {
                width: 440px;
                margin-bottom: 24px;
            }

            .circle {
                border-radius: 50%;
                width: 250px;
            }

            a {
                color: var(--color-danger);
                transition: color 0.3s ease, text-decoration-color 0.3s ease;

                &:hover {
                    color: var(--color-dark);
                }
            }
        }

        .description--parental-leave {
            grid-column: 1;
        }
    }

    .more {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .oneelement {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .twoelements {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .threeelements {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.bgcolor {
    background-color: var(--color-grey);
}

.contacts_branch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 5vw, 60px);
    margin-top: 60px;


    .contact-branch__body {
        display: flex;
        align-items: center;

        .title {
            margin-right: 24px;

            .location-heading {
                display: flex;
                align-items: center;

                .location-flag {

                    width: 30px;
                    height: fit-content;
                    margin-left: 10px;
                    display: block;
                }
            }
        }

        .contact-branch__body_description {
            color: var(--color-dark);
            font-size: var(--font-size-l);
            line-height: var(--line-height-m);
            font-weight: var(--font-weight-light);

            .contact-branch__contact-group {
                display: block;
                margin-top: 10px;
            }

            a {
                color: var(--color-danger);
                transition: color 0.3s ease, text-decoration-color 0.3s ease;

                &:hover {
                    color: var(--color-dark);
                }
            }
        }
    }
}


@media (max-width: 780px) {
    .contacts_branch {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .contacts {
        .person {
            display: flex;
            flex-direction: column;
        }
    }
}