@import "main.css";

section {
    position: relative;
    /*background: grey;*/
    /*aspect-ratio: 4/1;*/
    overflow: initial;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.hero {
    background: rgb(10,10,10); /* Temporary */
    display: flex;
    z-index: -1;

    background: url("../media/member_photos/2023/KSU_AUV_Leadership_2023.jpg");
    background-size: cover;
    background-position: 0 60%;
}

.hero div {
    width: 75%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(10,10,10,.8);
}

.hero p { /*temporary*/
    color: white;
    text-align: center;
}

#instructions, #team_attention {
    padding: 0 1rem;
    text-align: center;
}

#team_attention {
    transition: ease-out 800ms;
}

.title_position {
    text-align: center;
    margin-bottom: 1rem;
}

.title_position h3 {
    margin: 0;
}

.members {
    width: 70%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

.member_wrapper {
    width: 15%;
    aspect-ratio: 2/1;
    margin-bottom: 3rem;
}

.member_photo {
    width: 100%;
}

.member_text {
    padding: 0;
    margin: 0;
    color: var(--text_inverted);
}

.member_text_colored {
    padding: 0;
    margin: 0;
}

.member_name_colored, .member_text_colored {
    color: var(--text)
}