.team-container {
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 90rem;
    text-align: center;
}

@media (min-width: 1000px) {
    .team-container {
        padding-top: 4rem;
        padding-bottom: 4rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .photo-columns > div:nth-child(4):last-child {
        grid-column: 2 / span 1;
    }
}

.team-header {
    margin-left: auto;
    margin-right: auto;
}

.team-header h1 {
    margin-bottom: 2rem;
    font-size: 2.25rem;
    letter-spacing: -0.025em;
    font-weight: 800;
    color: #1a202c;
}

.team-header h2 {
    font-weight: 300;
    color: #718096;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.photo-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin-bottom: 5rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
.photo-columns h3 {
    margin-bottom: 0.25rem;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: #1a202c;
}

.photo-columns p {
    color: #718096;
}

.text-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.text-columns h3 {
    margin-bottom: 0.25rem;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: #1a202c;
}

.text-columns p{
    color: #718096;
}

.team-photo {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
    width: 13rem;
    height: 13rem;
    border-radius: 50%;
}

@media (min-width: 768px) and (max-width: 1000px) {
    .photo-columns,
    .text-columns {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .team-header h2 {
        text-decoration: underline;
    }
    .photo-columns > div:nth-child(3):last-child {
        grid-column: 1 / -1; /* spans both columns */
        justify-self: center; /* centers the item within the full row */
    }
  }

@media (max-width: 767px) {
    .photo-columns,
    .text-columns {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .team-photo {
        width: 10rem;
        height: 10rem;
    }

    .team-header h1 {
        font-size: 2rem;
    }

    .team-header h2 {
        text-decoration: underline;
    }

    .photo-columns h3,
    .text-columns h3 {
        font-size: 1.25rem;
    }
}