.values {
    --stdTransition:cubic-bezier(.4,0,.2,1) 0.3s;
}

.values > .grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    margin-bottom:2em;
}
.values .value{
    cursor: pointer;
    text-align: center;
    transition: color var(--stdTransition);
}
.values .value .icon{
    width:200px;
    height:150px;
    transition: transform var(--stdTransition);
}
.values .value .icon > svg{
    width:150px;
    height:150px;
}
.values .value .icon > svg path{
    fill:#000;
    transition: fill var(--stdTransition);
}
.values .value:hover .icon{
    transform: scale(1.3);
}
.values .value.hov-blue:hover .icon > svg path{
    fill:var(--blue);
}
.values .value.hov-blue:hover{
    color:var(--blue);
}
.values .value.hov-green:hover .icon > svg path{
    fill:var(--green);
}
.values .value.hov-green:hover{
    color:var(--green);
}
.values .value.hov-orange:hover .icon > svg path{
    fill:var(--orange);
}
.values .value.hov-orange:hover{
    color:var(--orange);
}
.values .value .title{
    margin-top:1em;
    font-family: acumin-pro-extra-condensed, sans-serif;
    font-weight:700;
    font-size:26px;
}
.values .value > .info{
    display:none;
}
.values > .info {
    flex: 1;
    opacity: 1;
    transition: opacity 200ms ease;
    min-height: 120px; /* optional: keeps layout stable */
    text-align: center;
}

/* Fade-out class applied before swapping text */
.values > .info.fading-out {
    opacity: 0;
}
@media (max-width: 767px) {
    .values > .grid{
        display:block;
    }
    .values .value .icon{
        margin-left:auto;
        margin-right:auto;
    }
    .values .value .title{
        margin-top:0.6em;
    }
    .values .value > .info{
        display:block;
        margin-bottom:3em;
    }
    .values > .info{
        display:none;
    }
}