.teams-header                   { display: flex; justify-content: center; }
.teams-header h2                { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.875rem; color: var(--black); text-transform: uppercase; margin: 2rem 0; position: relative; }
.teams-header h2:after          { content: ''; height: 2px; width: 100%; background-color: var(--black); position: absolute; bottom: -5px; left: 0; }

.teams-container                { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 80px; max-width: 1392px; padding: 0 1rem; margin: 11rem auto 5rem; }
.team                           { background-color: var(--white); text-align: center; border-radius: 12px; padding: 3.5rem 0.5rem 1rem 0.5rem; display: flex; flex-direction: column; align-items: center; position: relative; max-width: 400px; }
.team .image-container          { background-color: var(--very-light-grey); width: 190px; height: 190px; border: 5px solid var(--imagegrey); border-radius: 100%; overflow: hidden; position: absolute; top: -126px; }
.team .image-container img      { position: relative; top: 17px; }
.team h4                        { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.125rem; color: var(--black); margin: 1.125rem 0 0.125rem 0; }
.team span.job-title            { font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 1rem; color: var(--black); }
.team p                         { font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 1rem; color: var(--black); }
.team .contact-details          { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 1rem; }
.team .contact-details .contact-telephone a { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--light-red); }
.team .contact-details .contact-telephone a .icon { font-size: 1.5rem; font-weight: 500; }
.team .contact-details .contact-telephone a .telephone { font-family: 'Poppins', sans-serif; font-size: 1.125rem; font-weight: 500; }
.team .contact-details .contact-telephone a:hover { color: var(--gold); }

@media only screen and (min-width: 0px) and (max-width: 1400px)
{
    .teams-container            { gap: 60px; }
}

@media only screen and (min-width: 0px) and (max-width: 1200px)
{
    .teams-container            { gap: 40px; }
}

@media only screen and (min-width: 0px) and (max-width: 1000px)
{
    .teams-container            { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 150px; }
}

@media only screen and (min-width: 0px) and (max-width: 800px)
{
    .teams-container            { grid-template-columns: repeat(1, minmax(0, 1fr)); margin: 7.5rem auto 5rem; }
    .teams-container .team      { margin: 0 auto; }
}