.CardContainer {
    display: flex;
    justify-content: center;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: calc(1em + 0.390625vw);    
    /*margin: 0 5%; */   
}

.StatCard {
    border-radius: 0.3em;
    justify-content: center;
    align-items: center;
    padding: 1em;
    position: relative;
    background: #fff;
    max-width: calc(10em + 0.390625vw);
    box-shadow: var(--shadow-style);
}

.StatTitle {    
    font-weight: 700;
    font-style: normal;
    font-size: 1.1em;
    text-transform: uppercase;
}

.StatBody {
    display: grid;
    grid-template-rows: 1em 4em;
    background-size: 0.75em;
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: top;
}

.Body {
    display: grid;
    grid-template-columns: 9fr 3fr;
}

.Side {
    display: grid;
    grid-template-rows: 1em 4em;
}

.BodyLabel {
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(255,255,255,0.9);    
    font-weight: 700;
    font-style: normal;
    font-size: 2.5em;
    text-transform: uppercase;
}

.SideLabel {
    display: flex;
    justify-content: center;
    align-items:end;
    text-align: center;
    padding-bottom:0.5em;
    color:rgba(255,255,255,0.8);    
    font-size: 0.7em;
    font-weight:500;
    text-transform: uppercase;
    transform:rotate(270deg);
}

    .CardBkg-Green .StatBody {
        background-image: url('../images/arrow-green.svg');
    }

.CardBkg-Green .StatTitle, .CardBkg-Green .BodyLabel,.CardBkg-Green .SideLabel {
    color: #507435;
}

.CardBkg-Green:hover {
    cursor: pointer;
    box-shadow: 0 0 8px rgba(117,186,67,0.4);
}

    .CardBkg-Purple .StatBody {        
        background-image: url('../images/arrow-purple.svg');        
    }

.CardBkg-Purple .StatTitle, .CardBkg-Purple .BodyLabel, .CardBkg-Purple .SideLabel {
    color: #912E91;
}

.CardBkg-Purple:hover {
    cursor: pointer;
    box-shadow: 0 0 8px rgba(145,46,145,0.4);
}

    .CardBkg-Gold .StatBody {
        background-image: url('../images/arrow-Gold.svg');
    }

.CardBkg-Gold .StatTitle, .CardBkg-Gold .BodyLabel, .CardBkg-Gold .SideLabel {
    color: #AB822D;
}

.CardBkg-Gold:hover {
    cursor: pointer;
    box-shadow: 0 0 8px rgba(171,130,45,0.4);
}

    .CardBkg-Orange .StatBody {        
        background-image: url('../images/arrow-orange.svg');        
    }

.CardBkg-Orange .StatTitle, .CardBkg-Orange .BodyLabel, .CardBkg-Orange .SideLabel {
    color: #F9B916;
}

.CardBkg-Orange:hover {
    cursor: pointer;
    box-shadow: 0 0 8px rgba(249,185,22,0.4);
}

.DivCharts {
    display: grid;
    grid-template-columns: 1fr 1fr;    
    gap: calc(2em + 0.390625vw);
    padding-top: 3em;
}

@media only screen and (max-width:820px) {
    .CardContainer {
        margin: 0 3em;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2em;
    }
    .DivCharts {
        display: grid;
        grid-template-columns: 1fr;
        gap: 3em;        
    }
}

@media only screen and (max-width:600px) {
    .CardContainer {        
        display: grid;
        grid-template-columns: 1fr 1fr;        
    }
}