#stats{
    width: 100%;
    margin: auto;
    padding: 5vh 2em 10vh;
    background: var(--main-cream-background);
}




#stats .stats_container{
    width: 100%;
    max-width: 90em;
    margin: auto;
    padding: 1em;
    border-radius: 1em;
    border: 1px solid #bebebe;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


#stats .stats_container .stat{
    align-self: stretch;
    padding: 2em 1em;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1em;
}



#stats .stats_container .stat:is(:nth-of-type(1), :nth-of-type(2))::after{
    content: '';
    width: 60%;
    height: 1px;
    position: absolute;
    right: 50%;
    top: 100%;
    transform: translateX(50%);
    background: #e1e1e1;
}




#stats .stats_container .stat .data{
    font-size: min(3em, 7vw);
    font-weight: 200;
    color: var(--main-blue);
    min-width: max-content;
}


#stats .stats_container .stat .label{
    font-size: min(1.5em, 4vw);
    font-weight: 200;
    margin-bottom: -0.1em;
    max-width: 5em;
}











@media screen and (min-width: 900px){

    #stats .stats_container{
        flex-direction: row;
    }


    #stats .stats_container .stat{
        flex-grow: 1;
        padding: 1em 2em;
        justify-content: center;
    }


    #stats .stats_container .stat:is(:nth-of-type(1), :nth-of-type(2))::after{
        content: '';
        width: 1px;
        height: 50%;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        background: #e1e1e1;
    }


    #stats .stats_container .stat .label{
        max-width: initial;
    }


}