.team-section{
    position:relative;
    color: var(--off-white);
    text-align: left;
    font-size: 1.5rem;
    padding: 50px 0;
    overflow: hidden;
}

.team-section>div:last-of-type{
    z-index: 1;
    display:flex;
    position:absolute;
    top: 0;
    width: 100%;
    overflow: hidden;
    object-position: center center;
}

/* .team-section { outline: 3px dashed lime; }
.team-section > div:first-of-type { outline: 3px dashed cyan; }
.team-section > div:last-of-type { outline: 3px dashed magenta; }
.team-section > div:last-of-type > img { outline: 3px dashed yellow; } */

.team-section>div>img{
    z-index: 0;
    /* height: 100%; */
    width: 100%;
    align-self: center;
    overflow: hidden;
    object-fit: cover;
}

.team-section>div:first-of-type{
    background-color: var(--off-black-75-opacity);
    position: relative;
    width: 100%;
    padding: 25px 0 40px 0;
    z-index: 2;
}

.team-section>div:first-of-type>div{
    width:85%;
    margin: auto;
}

.team-section>div>div>h1{
    color: var(--orange-3);
    font-size: 4rem;
    text-shadow: var(--off-black) 0 0 1px;
}

.rover-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    width: 75%;
    /* margin: 3rem auto; */
    border-radius: 25px;
    overflow: hidden;
    /* background-color: var(--off-black-25-opacity); */
}

.rover-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 10px;
    color: var(--off-white);
    z-index: 2;
}

.rover-text h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.rover-text p {
    font-size: 1.2rem;
    line-height: 1.6;
}

.rover-media {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.rover-media img, .rover-media canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media screen and (max-width: 850px){
    .team-section{
        padding: 0;
    }
    .team-section>div:first-of-type{
        padding: 10px 0 20px 0;
    }
    .team-section>div:first-of-type>div{
        width:90%;
        margin: auto;
    }
    .team-section, .rover-section{
        font-size: 0.8rem;
    }
    h1{
        padding:0.8rem 0;
    }
    .team-section>div>div>h1 {
        font-size: 2rem;
    }
    .rover-section {
        grid-template-columns: 1fr;
        width: 95%;
    }

    .rover-media {
        order: -1;
        height: 300px;
    }

    .rover-text {
        padding: 2rem 10px;
        font-size: 1.2rem;
    }

}