a.button.back {
    margin: var(--margins-small);
}
a.button.back svg {
    rotate: 180deg;
}
#intro {
    display: flex;
    flex-flow: row wrap;
    margin-top: 0;
}
@media screen and (max-width: 850px) {
    a.button.back {
        margin: var(--margins-xsmall);
    }
    #intro {
        flex-flow: column nowrap;
    }
    .person-info {
        order: 2;
    }
    .name {
        margin-bottom: 32px;
    }
    .photo {
        order: 1;
        margin-bottom: 32px;
    }
    
}
.person-info {
    flex: 1 0 auto;
}
.name {
    margin: 0 0 24px -32px;
}
.role-title {
    color: var(--global-text-primary);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px; /* 150% */
}
.pronouns {
    color: var(--global-text-secondary);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px; /* 150% */
}

.photo {
    width: 192px;
    height: 192px;
    flex: 0 0 auto;
    border-radius: 192px;
    border: 1px solid var(--global-divider);
    background: lightgray 50% / cover no-repeat;
}

/* Smaller photo for the personnel card */
.personnel-card .photo {
    width: 64px;
    height: 64px;
    border-radius: 50%; /* Keeps it circular */
    border: 1px solid var(--components-card-border);
    background-size: cover;
    background-position: center;
}

.btn-outline {
    position: relative;
    z-index: 10; 
    display: inline-flex; /* Align the SVG and text inline */
    align-items: center; /* Vertically center the contents */
    justify-content: center; /* Center-align the text and SVG */
    border: 1px solid #004d36; /* Match the border color to the background green */
    background-color: transparent; /* No fill */
    color: #004d36; /* Green text color to match the border */
    padding: 0.5rem 1rem; /* Add some padding */
    font-size: 1rem; /* Adjust font size */
    font-weight: bold; /* Make the text bold */
    text-decoration: none; /* Remove underline */
    border-radius: 0; /* 90-degree edges */
    cursor: pointer; /* Pointer cursor for hover effect */
    transition: all 0.3s ease; /* Smooth hover transition */
}

.btn-outline:hover {
    background-color: #004d36; /* Green background on hover */
    color: #fff; /* White text on hover */
    text-decoration: none; /* Prevent underline on hover */
}

.btn-outline svg {
    margin-right: 0.5rem; /* Add spacing between the icon and text */
    fill: currentColor; /* Inherit the text color for the SVG icon */
    width: 1rem; /* Adjust SVG size */
    height: 1rem;
}
.btn-inverse {
    display: inline-flex; /* Align the SVG and text inline */
    align-items: center; /* Vertically center the contents */
    justify-content: center; /* Center-align the text and SVG */
    border: 1px solid #fff; /* White border */
    background-color: transparent; /* No fill */
    color: #fff; /* White text color */
    padding: 0.5rem 1rem; /* Add some padding */
    font-size: 1rem; /* Adjust font size */
    font-weight: bold; /* Make the text bold */
    text-decoration: none; /* Remove underline */
    border-radius: 0; /* 90-degree edges */
    cursor: pointer; /* Pointer cursor for hover effect */
    transition: all 0.3s ease; /* Smooth hover transition */
}

.btn-inverse:hover {
    background-color: #fff; /* White background on hover */
    color: #004d36; /* Green text on hover */
    text-decoration: none; /* Prevent underline on hover */
}

.btn-inverse svg {
    margin-right: 0.5rem; /* Add spacing between the icon and text */
    fill: currentColor; /* Inherit the text color */
    width: 1rem; /* Adjust SVG size */
    height: 1rem;
}