}


/* =========================================================
   FILTER BUTTONS
   ========================================================= */

#class-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 0;
    margin: 0 0 30px 0;
    list-style: none;
}

#class-filter li {
    cursor: pointer;
    padding: 9px 18px;
    border-radius: 25px;
    white-space: nowrap;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .class-text {
        padding: 18px;
    }

    .class-text h2 {
        font-size: 20px;
    }

    .class-teacher img {
        width: 42px;
        height: 42px;
    }

    #class-filter {
        gap: 7px;
        margin-bottom: 25px;
    }

    #class-filter li {
        padding: 8px 15px;
        font-size: 14px;
    }

    .details-content p {
        font-size: 16px;
        line-height: 1.65;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    /* ---------- CONTAINER ---------- */

    .class-container {
        margin-left: 0;
        margin-right: 0;
    }


    /* ---------- CARD ---------- */

    .class-item {
        width: 100%;
        padding: 10px 0;
    }

    .class-wrap {
        width: 100%;
    }


    /* ---------- CONTENT ---------- */

    .class-text {
        padding: 16px;
    }


    /* ---------- TITLE ---------- */

    .class-text h2 {
        font-size: 19px;
        line-height: 1.3;
        margin-bottom: 14px;
    }


    /* ---------- TEACHER ---------- */

    .class-teacher {
        margin-bottom: 12px;
    }

    .class-teacher img {
        width: 40px;
        height: 40px;
    }


    /* ---------- INFORMATION ---------- */

    .class-meta p {
        font-size: 15px;
        line-height: 1.6;
    }


    /* =====================================================
       DETAILS - MOBILE
       ===================================================== */

    .workshop-details {
        margin-top: 10px;
    }

    .details-button {
        font-size: 17px;
        line-height: 1.55;
    }

    .details-content {
        margin-top: 12px;
    }

    .details-content p {
        font-size: 18px !important;
        line-height: 1.7;
        margin: 0;
    }


    /* =====================================================
       FILTERS - MOBILE
       ===================================================== */

    #class-filter {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding: 5px 2px 12px;
        margin-bottom: 20px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    #class-filter li {
        flex: 0 0 auto;
        font-size: 13px;
        padding: 8px 14px;
    }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 400px) {

    .class-text {
        padding: 14px;
    }

    .class-text h2 {
        font-size: 18px;
    }

    .class-meta p {
        font-size: 15px;
        line-height: 1.6;
    }

    .class-teacher h3 {
        font-size: 15px;
    }


    /* ---------- DETAILS ---------- */

    .details-button {
        font-size: 17px;
    }

    .details-content p {
        font-size: 18px !important;
        line-height: 1.7;
    }
}