.keynumbers--container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 48px;
    row-gap: 40px;
}

.keynumbers--item {
    display: flex;
    flex-direction: column;
    flex: 1 1 280px;
    max-width: 394px;
}

@media screen and (min-width: 1024px) {
    .keynumbers--item {
        flex-direction: row;
        gap: 24px;
        flex: 1 1 340px;
    }
}

.keynumbers--item .key-number {
    font-family: var(--kanit);
    font-size: 72px;
    font-style: italic;
    font-weight: 900;
    line-height: 100%;
    text-transform: uppercase;
    flex-shrink: 0;
}

@media screen and (min-width: 1024px) {
    .keynumbers--item .key-number {
        top: -32px;
        position: relative;
    }
}

.keynumbers--item .key-number.visible .char {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
}

.keynumbers--item .key-number .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px) rotate(5deg);
    background: radial-gradient(109.32% 37.37% at 50.01% 50.02%, #328269 20%, #285041 80%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.keynumbers--item .key-number .char.visible {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
}

.keynumbers--item .key-number .char:last-child {
    padding-right: 3px;
}

.keynumbers--item .key-content h3 {
    color: var(--black);
    font-family: var(--asap);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    text-transform: none;
}

.keynumbers--item .key-content p {
    color: var(--green-dark);
    font-size: 14px;
}