.stats {
    width: 60%;
    margin: auto;
}

.ribbon-rotated {
    position: fixed;
    inset: 0 auto auto 0;   /* top right botton left */
    background: #08769b;
    /* transform-origin: 100% 0; /* or top left */
    /* transform: translate(-29.3%) rotate(-45deg); */
    box-shadow: 0 0 0 999px #08769b;
    clip-path: inset(0 -100%);
}

.left {
    inset: 0 auto auto 0; /* top and left equal to 0 */
    transform-origin: 100% 0; /* OR top right */
    transform: translate(-29.3%) rotate(-45deg);
}

.right {
    inset: 0 0 auto auto; /* top and right equal to 0 */
    transform-origin: 0 0; /* OR top left */
    transform: translate(29.3%) rotate(45deg);
}

.ribbon-folded {
    --f: 10px; /* control the folded part*/
    --r: 10px; /* control the ribbon shape */
    --t: 10px; /* the top offset */
    
    position: absolute;
    inset: var(--t) /* calc(-1*var(--f)) */  -25px auto auto;
    padding: 0 20px var(--f) calc(10px + var(--r));
    clip-path: 
        polygon(0 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,
        calc(100% - var(--f)) calc(100% - var(--f)),0 calc(100% - var(--f)),
        var(--r) calc(50% - var(--f)/2));
    background: #b96a2a8c;
    box-shadow: 0 calc(-1*var(--f)) 0 inset #0005;  
    font-size: 1.2rem; 
}

.box {
    /* max-width:500px;
    height:200px;
    background:lightblue; */
    position: relative;
    margin: 20px auto 65px auto;
}

.position1,
.position2,
.position3 {
    width: 60%;
    position: relative;
    padding-bottom: 40px;
    font-size: 1.2rem;
    border: solid 1px rgba(255, 166, 0, 0.226);
}

.position1 {
    top: 5rem;
    left: 10rem;
    animation-name: caer;
    animation-duration: 2s;
}

@keyframes caer {
    from {top: 0px;}
    to {top: 5rem;}
}

.position2 {
    top: 20rem;
    left: 27rem;
    animation: desdeIzquierda;
    animation-duration: 3s;
}

@keyframes desdeIzquierda {
    from {left: 0px;}
    to {left: 27rem;}
}

.position3 {
    top: -20rem;
    left: 20rem;
    transform: rotate(-10deg);
    background-color: rgba(58, 56, 56, 0.726);
    background-color: rgba(20, 31, 43, 0.541);
    animation-name: desdeDerecha;
    animation-duration: 4s;
}

@keyframes desdeDerecha {
    from {left: 0rem;}
    to {left: 20rem;} 
}

@media (max-width: 690px) {
    .cards {
        grid-template-columns: repeat(1, 1fr);        
        width: 100%;   
        
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0;
        margin-top: 10px;
        margin-bottom: 15px;
        padding: 0;
        overflow-x: hidden; 
    }

    .card {
        box-shadow: 3px 3px 3px lightgray;
        border-radius: 3px;
        padding: 15px 0;       
    }

    .stats {
        width: 96%;
    }

    .position1,
    .position2,
    .position3 {
        width: 100%;
        left: 0;
        animation-name: none;
    }

    .position1 {
        top: .5rem;
    }

    .position3 {
        top: -15rem;
    }

    .position3:hover {
        transform: rotate(-10deg);
    }

    .box {
        margin: 40px auto;
    }

    .ribbon-folded {
        --f:2px;
        inset: var(--t) /* calc(-1*var(--f)) */  -9px auto auto;
    }
}