.wrap-honor {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(24px, 3vw, 40px) clamp(16px, 2vw, 20px);
    .item-honor {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        .wrap-img {
            background: var(--nature);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: clamp(180px, 22vw, 310px);
            padding-block: clamp(20px, 4vw, 40px);
            width: 100%;
            position: relative;
            span {
                position: absolute;
                bottom: -16px;
                font-size: 16px;
                font-family: var(--DemiBold);
                color: #616161;
                background: #E4EAF0;
                line-height: 24px;
                padding: 4px 16px;
                border-radius: 100px;
            }
        }
        .title-honor {
            margin-top: 32px;
            font-size: clamp(14px, 2vw, 16px);
            font-family: var(--DemiBold);
        }
        .desc-honor {
            margin-top: 8px;
            font-size: clamp(12px, 1vw, 14px);
            font-family: var(--DemiBold);
            color: #616161;
            line-height: 24px;
        }
    }
}
@media only screen and (min-width: 768px) {
    .wrap-honor {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media only screen and (min-width: 1024px) {
    .wrap-honor {
        grid-template-columns: repeat(4, 1fr);
    }
}