.section--leap {
    position: relative
}

.mask-ic-article, .mask-ic-broadcast, .mask-ic-whitepaper, .mask-ic-event, .mask-ic-gadget, .mask-ic-faq, .mask-ic-innovation, .mask-ic-fair-price {
    display: block;
    height: 6rem;
    width: 6rem;
    background-repeat: no-repeat;
    background-color: var(--c-primary);
    overflow: hidden;
    transition: 0.5s var(--ease2);
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    background-image: linear-gradient(0deg, var(--c-secondary) 50%, transparent 50%);
    background-size: 100% 0%;
    background-position: bottom left
}
.mask-ic-article-white, .mask-ic-broadcast-white, .mask-ic-whitepaper-white, .mask-ic-event-white, .mask-ic-gadget-white, .mask-ic-faq-white, .mask-ic-innovation-white, .mask-ic-fair-price-white {
    display: block;
    height: 6rem;
    width: 6rem;
    background-repeat: no-repeat;
    background-color: var(--c-white);
    overflow: hidden;
    transition: 0.5s var(--ease2);
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    background-image: linear-gradient(0deg, var(--c-secondary) 50%, transparent 50%);
    background-size: 100% 0%;
    background-position: bottom left
}

.mask-ic-article {
    -webkit-mask-image: url('../../img/icon/article.svg');
    mask-image: url('../../img/icon/article.svg')
}
.mask-ic-article-white {
    -webkit-mask-image: url('../../img/icon/white/article.svg');
    mask-image: url('../../img/icon/white/article.svg')
}

.mask-ic-gadget {
    -webkit-mask-image: url('../../img/icon/gadget.svg');
    mask-image: url('../../img/icon/gadget.svg')
}

.mask-ic-fair-price {
    -webkit-mask-image: url('../../img/icon/fair-price.svg');
    mask-image: url('../../img/icon/fair-price.svg')
}
.mask-ic-fair-price-white {
    -webkit-mask-image: url('../../img/icon/white/fair-price.svg');
    mask-image: url('../../img/icon/white/fair-price.svg')
}
.mask-ic-innovation {
    -webkit-mask-image: url('../../img/icon/innovation.svg');
    mask-image: url('../../img/icon/innovation.svg')
}
.mask-ic-innovation-white {
    -webkit-mask-image: url('../../img/icon/white/innovation.svg');
    mask-image: url('../../img/icon/white/innovation.svg')
}
.mask-ic-faq {
    -webkit-mask-image: url('../../img/icon/faq-2.svg');
    mask-image: url('../../img/icon/faq-2.svg')
}

.mask-ic-broadcast {
    -webkit-mask-image: url('../../img/icon/broadcast.svg');
    mask-image: url('../../img/icon/broadcast.svg')
}

.mask-ic-whitepaper {
    -webkit-mask-image: url('../../img/icon/article.svg');
    mask-image: url('../../img/icon/article.svg')
}

.mask-ic-event {
    -webkit-mask-image: url('../../img/icon/events.svg');
    mask-image: url('../../img/icon/events.svg')
}
.mask-ic-event-white {
    -webkit-mask-image: url('../../img/icon/white/events.svg');
    mask-image: url('../../img/icon/white/events.svg')
}
.leap-cat:hover .mask-leap__icon {
    background-size: 200% 200%;
    background-position: bottom left
}

.leap--categories {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    justify-items: center;
    text-align: center;
    gap: 4rem;
    align-items: baseline
}

.leap-imgtitle {
    margin-bottom: 2.5rem;
    max-width: 16rem
}

.leap--head {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 5rem
}

.leap--head .en-title b {
    font-weight: 700;
    color: var(--c-black)
}

.leap--head .en-title {
    font-size: var(--fs-22);
    text-align: center;
    line-height: 1.2;
    font-variation-settings: var(--fw-200);
    margin-top: 1rem;
    font-family: var(--ff-en);
    color: var(--c-neutral-500);
    direction: ltr
}

.leap-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center
}

.leap-cat .icon {
    font-size: 4.5rem;
    transition: var(--t-ease) var(--ease2)
}

.leap-cat:hover .icon {
    color: var(--c-secondary)
}

.leap-cat__svg {
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: 1rem;
    stroke: var(--c-primary);
    transition: 0.4s var(--ease2)
}

.leap-cat:hover .leap-cat__svg {
    fill: var(--c-secondary)
}

.leap-cat__entitle {
    font-size: var(--fs-24);
    font-family: var(--ff-en);
    font-weight: 700;
    line-height: 1;
    transition: 0.6s var(--ease5);
    direction: ltr
}

.desktop .leap-cat__entitle::before {
    content: attr(data-title);
    position: absolute;
    bottom: 112%;
    transform: translate3d(0, 0, 0);
    color: var(--c-primary-500)
}
.desktop .why-us .leap-cat__entitle::before {
    content: attr(data-title);
    position: absolute;
    bottom: 112%;
    transform: translate3d(0, 0, 0);
    color: var(--c-white)
}
.desktop .leap-cat:hover .leap-cat__entitle {
    transform: translateY(112%)
}

.leap-cat:hover .leap-cat__entitle {
    color: var(--c-primary-500)
}
.leap-cat:hover .why-us .leap-cat__entitle {
    color: var(--c-primary-500)
}
.leap-cat__entitle-wrap {
    overflow: hidden;
    margin-top: 2rem
}

.leap-cat__title {
    font-size: var(--fs-16);
    font-variation-settings: var(--fw-200);
    transition: 0.4s var(--ease2);
    line-height: 1.5;
    margin-top: .8rem
}

.leap-cat:hover .leap-cat__title {
    color: var(--c-primary)
}

.leap-cat__icon {
    margin-top: 1.5rem;
    font-size: 1.5rem;
    overflow: hidden
}

.leap-cat__icon::after, .leap-cat__icon::before {
    transition: 0.8s var(--ease3);
    display: block
}

.leap-cat__icon::after {
    content: "\e909";
    font-family: var(--ff-icon);
    position: absolute;
    transform: translateY(110%) translateX(-110%);
    color: var(--c-secondary);
    top: 0
}

.leap-cat:hover .leap-cat__icon::before {
    transform: translateY(-110%) translateX(110%)
}

.leap-cat:hover .leap-cat__icon::after {
    transform: translateY(0%) translateX(0%)
}

@media (min-width: 50em) {
    .leap--head {
        width: 47%
    }

    .leap--cards, .leap--categories {
        grid-template-columns:repeat(4, minmax(0, 1fr))
    }

    .leap--categories, .leap--cards {
        padding: 0 3rem
    }

    .leap--cards {
        display: grid
    }
}