.ninja-way {
    margin: 25vh 0;
    display: grid;
    width: 100vw;
}

.ninja-way > .title {
    justify-self: center;
    align-self: center;
    font-size: var(--font-size-xlarge);
    font-family: var(--font-family-global), serif;
    color: var(--text-color-body);
    text-align: center;
    margin-bottom: 12.5vh;
    text-wrap-style: balance;
}

.ninja-way .wrapper {
    display: grid;
    grid-template-columns: 1fr 50px 1fr 50px 1fr;
    grid-column-gap: 50px;
    gap: 50px;
    padding: 50px;
    /*grid-template-rows: auto 1fr auto;*/
    justify-items: center;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ninja-way .wrapper .card {
    background-color: rgba(var(--body-color-darker-rgb), .25);
    box-shadow: var(--box-shadow-global);
    /*height: -webkit-fill-available;*/
    border-radius: 1rem;
    /*margin: 50px;*/
    padding: 2rem;
    cursor: pointer;
    transition: .5s;
    display: flex;
    min-width: 200px;
    width: 100%;
    max-width: 400px;
    height: 250px;
    border: 2px dashed transparent;
    will-change: transform;
}

.ninja-way .wrapper .card:hover {
    animation: bounce .5s;
    border: 2px dashed var(--body-color-light);
    transition: .5s;
}

@keyframes bounce {
    0%{
        transform: translate(0);
    }
    20%{
        transform: translateX(25px);
    }
    40%{
        transform: translate(0);
    }
    60%{
        transform: translateX(5px);
    }
    80%{
        transform: translate(0);
    }
}

.ninja-way .wrapper .card i {
    font-size: 50px;
    color: var(--text-color-body);
    margin: 1rem;
    width: min-content;
    /*place-self: center;*/
}

.ninja-way .wrapper .card .title {
    font-family: var(--font-family-global), serif;
    text-shadow: var(--box-shadow-global);
    color: var(--body-color-light);
    padding: .5rem;
    border-radius: 1rem;
    /*border: 2px solid var(--text-color-body);*/
    /*width: max-content;*/
    align-self: center;
    text-align: center;
}

.ninja-wavy-line {
    --s: 10px; /* size of the wave */
    --b: 10px; /* thickness of the line */
    --m: 0.2; /* curvature of the wave [0 2] */

    background: var(--body-color-light);
    --R: calc(var(--s)*sqrt(var(--m)*var(--m) + 1) + var(--b)/2);
    height: calc(2*var(--R));
    width: 100%;
    --_g: rgba(0, 0, 0, 0) calc(99% - var(--b)), #ffffff calc(101% - var(--b)) 99%, rgba(0, 0, 0, 0) 101%;
    mask:
    radial-gradient(var(--R) at left 50% bottom calc(-1*var(--m)*var(--s)), var(--_g))
     calc(50% - 2*var(--s)) calc(50% - var(--s)/2 - var(--b)/2)/calc(4*var(--s)) calc(var(--s) + var(--b)) repeat-x,
    radial-gradient(var(--R) at left 50% top calc(-1*var(--m)*var(--s)),var(--_g))
     50% calc(50% + var(--s)/2 + var(--b)/2)/calc(4*var(--s)) calc(var(--s) + var(--b)) repeat-x;
}

.ninja-wavy-line {
    width: 200px;
}

.ri-shining-2-line {
    transform: rotateZ(45deg);
}

.ri-arrow-right-double-line {
    font-size: 50px;
    color: var(--body-color-light);
}

.ninja-way .booking {
    display: grid;
    justify-items: center;
    align-items: center;
    margin-top: 12.5vh;
    padding: 50px;
}

.ninja-way .booking a {
    /*width: max-content;*/
    color: var(--text-color-body);
    border-radius: 1rem;
    border: 2px solid var(--text-color-body);
    font-size: var(--font-size-large);
    font-weight: bold;
    padding: 1rem;
    transition-duration: .5s;
    text-align: center;
}

.ninja-way .booking a:hover {
    background-color: var(--text-color-body);
    color: var(--body-color);
    transition-duration: .5s;
}

@media screen and (max-width: 1400px) {
    .ninja-way .wrapper {
        grid-template-columns: 1fr;
    }

    .ri-arrow-right-double-line {
        transform: rotate(90deg);
    }

    @keyframes bounce {
        0%{
            transform: translate(0);
        }
        20%{
            transform: translateY(25px);
        }
        40%{
            transform: translate(0);
        }
        60%{
            transform: translateY(5px);
        }
        80%{
            transform: translate(0);
        }
    }
}