.m1,
.m2,
.m3,
.m4 {
    padding: 24px 0;
}

a img {
    aspect-ratio: 1/0.66;
}

.m1 a {
    width: 33.33%;
    display: block;
    padding: 12px;
}

.m1 a h2 {
    color: #fff;
    font-size: 18px;
    line-height: 24px;
}

.m2 a {
    display: block;
    padding: 12px;
}

.m2 .box1 {
    padding: 12px;
}

.m2 #Hot a h2 {
    color: #fff;
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 12px;
}

.m2 a .catename {
    margin-bottom: 0;
    font-size: 14px;
    line-height: 18px;
    color: #198754;
}

.m3 .box1 a h2 {
    font-size: 18px;
    line-height: 24px;
}

.m3 .box1 a,
.m3 .box2 a {
    display: block;
    padding: 12px;
}

.m3 .box2 a img {
    aspect-ratio: 1/0.44;
}

.m3 .box2 a h2 {
    font-size: 18px;
    line-height: 24px;
    color: #fff;
}

.m3 a .catename {
    color: #0dcaf0;
}

.m2 #Hot,
.m3 #Premium {
    padding-right: 24px
}

.m3 .col-lg-8 .flex {
    margin: -12px;
}

.m2 .sidebar a h2 {
    font-size: 18px;
    line-height: 24px;
    color: #333;
}

.m3 li h2 {
    font-size: 18px;
    line-height: 24px;
}

.m4 a {
    width: 25%;
}

.dt li a {
    display: flex;
    width: 100%;
    align-items: center;
}

.dt li a img {
    width: 120px;
    aspect-ratio: 1/0.8;
}

.dt li a .text {
    width: calc(100% - 120px);
    padding-left: 12px;
}

.dt li a .text .catename {
    font-size: 12px;
    margin-bottom: 6px;
    line-height: 16px;
      color: #dc3545;
}

.dt li a .text h2 {
    font-size: 16px;
    line-height: 20px;
}

.dt-content {
    padding-right: 24px;
}

.search {
    width: 50%;
    margin: auto;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    display: flex;

}

.search input {
    width: 100%;
    border: none;
    outline: none;
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 18px;
    font-family: 'Lato', sans-serif;
}

.search input::placeholder {
    font-size: 14px;
    line-height: 18px;
    font-family: 'Lato', sans-serif;
}

.search .search_btn a {
    display: block;
    width: auto !important;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 18px;
    background: #dc3545;
    color: #fff;
    border-radius: 12px;
}

.m2 a.sidebar-about-box {position: relative;}
.m2 a.sidebar-about-box .catename{    position: absolute;
    top: 26px;
    left: 26px;
    padding: 4px 10px;
    display: inline-block;
    border-radius: 6px;
    color: #fff;
    font-size: 12px;
    z-index: 2;
background-color:#198754}

@media (max-width:992px) {
    .m4 a {
        width: 50%;
    }

    .m3 .col-lg-4 {
        width: 100%;
    }

    .dt-content {
        padding-right: 0;
    }
    .search {
        width: 60%;
    }
}

@media (max-width:768px) {
    .m1 a {
        width: 50%;
    }

    .m2 #Hot,
    .m3 #Premium {
        margin-bottom: 20px;
    }

    .m1,
    .m2,
    .m3,
    .m4 {
        padding: 12px 0;
    }

    .m2 #Hot,
    .m3 #Premium {
        padding-right: 0;
    }

    .m3 .flex:first-child {
        padding: 0 12px;
    }
    .search {
        width: 70%;
    }
}

@media (max-width:550px) {

    .m1,
    .m2,
    .m3,
    .m4 {
        padding: 6px 0 0;
    }

    .m1 a {
        width: 100%;
        padding: 6px 12px;
    }

    .featured-post-item:before {
        height: calc(100% - 12px);
        z-index: 1;
        bottom: 6px;
    }

    .m1 a h2,
    .m2 .sidebar a h2,
    .m3 .box1 a h2,
    .m3 .box2 a h2,
    .m3 li h2 {
        font-size: 16px;
        line-height: 20px;
    }

    .block-title h2 {
        padding: 6px 0px;
    }

    .block-title.mb-20 {
        margin-bottom: 12px;
    }

    .travel-new-box {
        padding: 6px 0px !important;
    }

    .m2 a {
        padding: 6px 12px;
    }

    .m2 #Hot a h2 {
        margin-bottom: 6px;
    }

    .m2 a .catename,
    .m3 a .catename {
        font-size: 12px;
        line-height: 16px
    }

    .m2 #Hot {
        margin-bottom: 12px;
    }

    .m2 .sidebar a p,
    .m3 .box1 a p {
        font-size: 14px;
        line-height: 18px;
    }

    .sidebar-about-box .sidebar-about-text {
        padding: 6px 0 0;
    }

    .m2 .sidebar {
        margin-bottom: 10px;
    }

    .m3 .grid-style-1 .grid-style-1-img,
    .m3 .box1 a h2 {
        margin-bottom: 6px;
    }

    .m3 .box1 a p {
        margin-bottom: 0px;
    }

    .m3 .box2 a {
        padding: 6px 12px;
    }

    .m3 .box2 a .featured-post-content {
        bottom: 12px;
    }

    .m3 .box2 a img {
        aspect-ratio: 1 / 0.66;
    }

    .trending-box li {
        padding: 12px
    }

    .m3 a .catename {
        margin-bottom: 6px;
    }

    .dt li a .text {
        width: calc(100% - 100px);
        padding-left: 8px;
    }

    .dt li a img {
        width: 100px;
    }

    .search {
        width: 90%;
    }
}