*{
    box-sizing: border-box;
}


.content-container{
    position: relative;
    height: fit-content;
	width: 60vw;
    margin-left: auto;
    margin-right: auto;
}

.hero-img{
    max-width: 100%;
    margin-top: 6rem;
    margin-bottom: 0rem;
}

.context-snippet{
    margin-top: 3rem;
}

.snippet-button{
    margin-top: auto;
    text-align: center;
    margin-bottom: auto;
}



.extern-button{
    display: inline-block;
}

.persona-img{
    max-width: 100%;
    border-radius: 0.4rem;
}

.persona-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    margin-bottom: 2rem;
}

.persona{
    padding: 0.25rem;
}

.persona-context{
    margin-top: 12rem;
}

h3{
    font-size: 1rem;
}

@media(max-width: 65.2rem){
    .content-container{
        width: 75vw;
    }

    .snippet-left{
        margin: auto;
    }

}

@media(max-width: 36.8rem){
    .persona-container{
        grid-template-columns: 1fr;
    }

    .column{
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width: 24rem){
    .content-container{
        width: 85vw;
    }

    .context-snippet{
        margin-top: 1rem;
    }
}