/** about-us.html SPECIFIC STYLES **/
.about-us-page h2 {
    font-size: 44px;
}

/** AGENT PROFILE SPECIFIC STYLES **/
.about-profile-page .section-header-area p {
    font-size: 20px;
    font-weight: 500;
    border-left: solid 4px var(--mardel-magenta);
    padding-left: 12px;
    margin-bottom: 14px;
}

.about-profile-page .section-header-area span {
    font-weight: 300;
    color: var(--gray-text);
    border: solid 1px var(--gray-line);
    border-radius: 6px;
    padding: 6px 12px;
    margin-right: 4px;
}

.about-profile-page .about-profile-grid {
    display: grid;
    grid-template-columns: 2fr 3fr;
    grid-template-rows: 1fr auto;
    margin-top: -150px;
    column-gap: 40px;
}

.about-profile-grid > :nth-child(1) {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;
}

.about-profile-grid > :nth-child(2) {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
}

.about-profile-grid > :nth-child(3) {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
}

.about-profile-page .about-portrait img {
    height: auto;
    position: sticky;
    top: 180px;
}

.about-profile-page .socials {
    margin: 44px 0 40px 0;
}

.about-profile-page .our-other-agents-section {
    padding-top: 80px;
    padding-bottom: 80px;
}

/** SHARED BETWEEN about-us.css AND AGENT PROFILES **/
.member-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 16px;
}

.member-card img {
    width: 340px;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    margin-bottom: 16px;
}

.member-card p.member-name {
    font-size: 28px;
    font-weight: 300;
}

.member-card .label {
    font-size: 14px;
    padding: 6px 12px;
    margin-top: 12px;
}

@media screen and (max-width: 1100px) {
    .about-profile-page .about-portrait img {
        position: relative;
    }

    .about-profile-page .about-profile-grid {
        column-gap: 32px;
        padding-top: 180px;
    }

    .about-profile-page .about-profile-grid > :nth-child(1) {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
    }

    .about-profile-page .about-profile-grid > :nth-child(2) {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
    }

    .about-profile-page .about-profile-grid > :nth-child(3) {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 3;
    }

    .about-profile-page .about-profile-grid .about-portrait {
        overflow: clip;
        height: calc(100% - 40px);
    }

    .about-profile-page .about-profile-grid .about-portrait img {
        margin-top: -160px;
    }

    .about-profile-page .about-profile-grid .btn {
        align-self: center;
    }
}

@media screen and (max-width: 800px) {
    .about-profile-page .about-profile-grid {
        display: flex;
        flex-direction: column;
    }

    .about-profile-page .section-header-area {
        text-align: center;
    }

    .about-profile-page .section-header-area p {
        width: fit-content;
        align-self: center;
    }

    .about-profile-page .socials {
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }

    .about-profile-page .about-profile-grid > :nth-child(1) {
        order: 2;
        margin-bottom: 36px;
    }

    .about-profile-page .about-profile-grid > :nth-child(2) {
        order: 1;
    }

    .about-profile-page .about-profile-grid > :nth-child(3) {
        order: 3;
    }

    .about-profile-page .about-profile-grid .about-portrait {
        height: 320px;
    }

    .about-profile-page .about-profile-grid .about-portrait img {
        width: 240px;
        margin-left: calc(50% - 120px);
        align-self: center;
    }
}