@media (max-width: 1600px) {
}

@media (max-width: 1500px) {
}

@media (max-width: 1400px) {
}

@media (max-width: 1200px) {
}

@media (max-width: 992px) {
}

@media (max-width: 768px) {
    .header {
        display: none;
    }

    .back {
        color: #000;
        position: unset;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .list {
        margin-top: 0;
    }

    .list.container {
        padding-top: 0 !important;
    }

    .content {
        gap: clamp(11.71875px, 3.125vw, 24.0px);
    }

    .card {
        width: clamp(163.57421875px, 43.61979166666667vw, 335.0px);
        border-radius: clamp(12.6953125px, 3.385416666666667vw, 26.0px);
    }

    .card .card-img {
        height: clamp(119.62890625px, 31.901041666666668vw, 245.0px);
        border-radius: clamp(12.6953125px, 3.385416666666667vw, 26.0px) clamp(12.6953125px, 3.385416666666667vw, 26.0px) 0 0;
    }

    .card .card-body {
        height: clamp(121.58203125px, 32.421875vw, 249.0px);
        padding: clamp(10.25390625px, 2.734375vw, 21.0px);
    }

    .card .card-body h2 {
        font-size: clamp(13.671875px, 3.6458333333333335vw, 28.0px);
        -webkit-line-clamp: 1;
        margin-bottom: clamp(9.765625px, 2.604166666666667vw, 20.0px);
    }

    .card .card-body h3 {
        font-size: clamp(11.71875px, 3.125vw, 24.0px);
        text-align: left;
    }

    .card .card-body p{
        font-size: clamp(11.71875px, 3.125vw, 24.0px);
        -webkit-line-clamp: 2;
        margin-bottom: clamp(20.01953125px, 5.338541666666667vw, 41.0px);
    }

    .detail .container {
        padding-top:  0 !important;
    }

    .detail .titleGroup h1 {
        font-size: clamp(15.625px, 4.166666666666667vw, 32.0px);
    }

    .detail .titleGroup p {
        font-size: clamp(8.7890625px, 2.34375vw, 18.0px);
    }
}

@media (max-width: 710px) {
}

@media (max-width: 576px) {
}