.quiz-list-grid{

    display:grid;

    gap:22px;

}

/* CARD */

.quiz-card{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    cursor:pointer;

}

/* LEFT */

.quiz-left{

    flex:1;

}

.quiz-badge{

    display:inline-block;

    padding:8px 16px;

    border-radius:30px;

    background:
    rgba(56,182,255,0.12);

    color:#38b6ff;

    font-size:12px;

    font-weight:600;

    margin-bottom:18px;

}

.quiz-title{

    font-size:24px;

    margin-bottom:12px;

    line-height:1.5;

}

.quiz-description{

    color:#b8c5df;

    font-size:14px;

    line-height:1.8;

    margin-bottom:20px;

}

/* META */

.quiz-meta{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

}

.meta-item{

    display:flex;

    align-items:center;

    gap:8px;

    padding:10px 14px;

    background:
    rgba(255,255,255,0.04);

    border-radius:12px;

    font-size:13px;

    color:#d7e2f7;

}

.meta-item i{

    color:#38b6ff;

}

/* RIGHT */

.quiz-right{

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    gap:15px;

}

/* START BUTTON */

.start-btn{

    padding:14px 24px;

    border:none;

    border-radius:14px;

    background:
    linear-gradient(
        145deg,
        #0077ff,
        #33b5ff
    );

    color:white;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:0.3s;

}

.start-btn:hover{

    transform:
    translateY(-3px);

}

/* ATTEMPTS */

.attempt-text{

    font-size:13px;

    color:#9fb0d1;

}

/* EMPTY */

.empty-box{

    text-align:center;

    padding:60px 20px;

    background:
    rgba(20,35,75,0.7);

    border-radius:25px;

}

.empty-box h2{

    font-size:32px;

    margin-bottom:12px;

}

.empty-box p{

    color:#b8c5df;

}

/* MOBILE */

@media(max-width:768px){

    .quiz-card{

        flex-direction:column;

        align-items:flex-start;

    }

    .quiz-right{

        width:100%;

        align-items:flex-start;

    }

    .quiz-title{

        font-size:20px;

    }

}