*{
    --color: #622066;
    --bigfont: 3;
    --medfont: 1.20;
    --smallfont: .9;
}


ul.metrics-container {
	display: flex;
	margin: 1em auto;
    max-width: 1400px;
    padding-inline-start: 0px;
}

.metrics-li{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    list-style-type: none ;
   padding: 3%;
   margin: 10px;
   flex: 1;
   border-radius: 10px;
   line-height: 1.25;
   width: 100%;
}

.metrics-li p{
    margin-bottom: 0px;
}

/*use classes better because using elements triggers the Cascade and the same style it's applied to all plugins!! - still - don't know how it compiles - */
.word-wrap,
.description-wrap,
.figure {
color: var(--color);
text-align: center;
}


.figure{
    font-size: calc(var(--bigfont) * 1em);
	font-weight: 700;
}
.word{
    font-size: calc(var(--medfont) * 1em);
	font-weight: 600;
}
.description{
    font-size: calc(var(--smallfont) * 1em);
	/*based on max word count of 200*/
	height: 110px;
}
.container-metrics-button{
    width: 100%;
    margin: 5% auto;
    text-align: center;
}
.metrics-button{
     border: 3px solid var(--color);
     text-decoration: none;
     text-align: center;
     padding: 2px;
     font-size: var(--smallfont);
     width: 100%;
     color: var(--color);
     margin: 8% 0% 6% 0%;
}
.metrics-button:hover{
    background: var(--color);
    color: #fff;
}


@media (max-width: 595px) {
    ul.metrics-container {
        flex-direction: column;
        margin: 1rem auto;
        width: 75vw;
    }
}
@media (max-width: 786px) {
    
		.figure{
		font-size: calc(var(--medfont) * 1.25em);
    }
}