.hero {
    /* background-image: linear-gradient(-10deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3)), url("../images/our-board/stock-work.jpeg"); */
    /* background-position-y: -30vh; */
    min-height: 48vh;
}

.hero-background {
    background-image: linear-gradient(-10deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3)), url("../images/our-board/stock-work.jpeg");
    background-position-y: -40vh;
    min-height: 48vh;
}

.hero-content {
    font-size: 5.4rem;
}

main {
    display: inline-block;
    background-color: #18483D;
    color: #FAEDE3;
}

.member-list {
    color: #FAEDE3;
}

.member-card {
    margin: 80px auto 80px auto;
    width: 70%;

    background-color: #FAEDE3;

    font-family: 'Mundial', sans-serif;

    display: flex;
}

.member-info {
    margin: 5vw;
    width: 50%;
    color: #18483D;
    font-size: 2rem;
}

.member-name {
    font-size: 2.8rem;
    font-weight: bold;
    font-style: italic;
    margin-bottom: 5px;
}

.portrait-container {
    position: relative;
    overflow: hidden;
}

.portrait-container:not(.tall){
    width: 25vw;
    min-height: 25vw;
}

.portrait-container.tall {
    width: 25vw;
    min-height: 32vw;
}

.portrait {
    width: 100%;
    height: 100%;
    position: absolute;
    object-position: center;
    object-fit: cover;
    overflow: hidden;
}

@supports (object-position: center) {
    .portrait-container {
        background-image: none;
    }
}

@supports (not (object-position: center)) {
    .portrait {
        display: none;
    }

    .portrait-container {
        background-size: cover;
        background-position-x: center;
        background-position-y: center;
    }
}

@media screen and (max-width: 1600px) {
    .member-card {
        width: 75%;
    }

    .portrait-container:not(.tall) {
        width: 27.5vw;
        min-height: 27.5vw;
    }

    .portrait-container.tall {
        width: 27.5vw;
        min-height: 35vw;
    }

    .member-name {
        font-size: 2.5rem;
    }

    .member-info {
        font-size: 1.8rem;
    }
}

@media screen and (max-width: 1200px) {
    .member-card {
        width: 80%;
    }

    .portrait-container:not(.tall) {
        width: 30vw;
        min-height: 30vw;
    }

    .portrait-container.tall {
        width: 30vw;
        min-height: 38vw;
    }

    .member-name {
        font-size: 2.25rem;
    }

    .member-info {
        font-size: 1.6rem;
    }

    .hero-content {
        font-size: 5.2rem;
    }
}

@media screen and (max-width: 1000px) {
    .member-card {
        width: 85%;
    }

    .portrait-container:not(.tall) {
        width: 32.5vw;
        min-height: 32.5vw;
    }

    .portrait-container.tall {
        width: 32.5vw;
        min-height: 41.275vw;
    }

    .member-name {
        font-size: 2rem;
    }

    .member-info {
        font-size: 1.5rem;
    }    

    .hero-content {
        font-size: 5rem;
    }
}

@media screen and (max-width: 800px) {
    .member-card {
        width: 90%;
    }

    .portrait-container:not(.tall) {
        width: 30vw;
        min-height: 30vw;
    }

    .portrait-container.tall {
        width: 30vw;
        min-height: 38vw;
    }

    .member-name {
        font-size: 1.75rem;
    }

    .member-info {
        font-size: 1.25rem;
    }
    
    .hero-content {
        font-size: 4.5rem;
    }
}

@media screen and (max-width: 650px) {
    .member-card {
        width: 95%;
    }

    .portrait-container:not(.tall) {
        width: 35vw;
        min-height: 35vw;
    }

    .portrait-container.tall {
        width: 35vw;
        min-height: 44.45vw;
    }

    .member-name {
        font-size: 1.5rem;
    }

    .member-info {
        font-size: 1.125rem;
    }
    
    .hero-content {
        font-size: 4rem;
    }
}

@media screen and (max-width: 500px) {
    .portrait-container:not(.tall) {
        width: 40vw;
        min-height: 40vw;
    }

    .portrait-container.tall {
        width: 40vw;
        min-height: 51vw;
    }

    .member-name {
        font-size: 1.25rem;
    }

    .member-info {
        font-size: 1rem;
    }

    .hero-content {
        font-size: 3.5rem;
    }
}

@media screen and (max-width:425px) {
    .portrait-container:not(.tall) {
        width: 45vw;
        min-height: 45vw;
    }

    .portrait-container.tall {
        width: 45vw;
        min-height: 57.15vw;
    }

    .member-name {
        font-size: 1.125rem;
    }

    .member-info {
        font-size: 0.9rem;
    }

    .hero-content {
        font-size: 3rem;
    }
}

@media screen and (max-width:350px) {
    
    .member-name {
        font-size: 1.1rem;
    }

    .member-info {
        font-size: 0.8rem;
    }
}