.teamHeroSection { position: relative; width: 100%; height: 100%; margin-top: calc(var(--navbar-height) * -1); }
.teamHeroSection img { position: absolute; display: block; height: 100%; width: 100%; object-fit: cover; z-index: 1; }
.teamHeroSection .container { position: relative; width: 100%; height: 100%; z-index: 2; }
.teamHeroSection .content { position: relative; z-index: 3; padding: calc(4rem + var(--navbar-height)) 0 6rem 0; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; gap: 1.5rem; }
.teamHeroSection .content h3 { flex: 1 0 calc(60% - (1.5rem / 2)); font-size: 2.5rem; font-weight: 400; color: var(--light-text); margin-bottom: 0; line-height: 1.2; font-family: "RobotoSerif", sans-serif; }
.teamHeroSection .content p { flex: 1 0 calc(40% - (1.5rem / 2)); font-size: 1.25rem; font-weight: 400; color: var(--light-text); margin-bottom: 0; line-height: 1.4; }

@media (max-width: 991.98px) {
    .teamHeroSection .container { min-height: auto; }
    .teamHeroSection .content { flex-direction: column; align-items: stretch; gap: 1.25rem; padding: calc(3.5rem + var(--navbar-height)) 0 4.5rem 0; }
    .teamHeroSection .content h3,
    .teamHeroSection .content p { flex: 1 0 auto; }
    .teamHeroSection .content h3 { font-size: 2.125rem; }
}

@media (max-width: 767.98px) {
    .teamHeroSection .content { padding: calc(3rem + var(--navbar-height)) 0 3.5rem 0; }
    .teamHeroSection .content h3 { font-size: 1.875rem; }
    .teamHeroSection .content p { font-size: 1.1rem; }
}

@media (max-width: 575.98px) {
    .teamHeroSection .content h3 { font-size: 1.625rem; }
    .teamHeroSection .content p { font-size: 1rem; }
}