main {
    padding: 100px 0 0
}

.cat-items a {
    margin: 20px 0 35px 15px
}

.cat-items a img {
    top: 0;
    right: 0;
    z-index: -1;
    height: 100%
}

.cat-items a h3 {
    background: linear-gradient(to left, rgba(0, 0, 0, 0.2), var(--body));
    padding: 40px 30px;
    width: 250px;
    text-align: left
}

.cat-items .owl-carousel {
    position: inherit
}

.cat-items .owl-carousel .owl-stage-outer {
    overflow: inherit
}

.cat-items .owl-carousel .owl-nav {
    max-width: 100%;
    width: 100%;
    margin: 0
}

.cat-items .owl-carousel .owl-nav div {
    width: 60px;
    height: calc(100% - 65px);
    bottom: 30px;
    position: absolute;
    cursor: pointer
}

.cat-items .owl-carousel .owl-nav div.owl-next {
    left: 0;
    background: linear-gradient(to left, transparent, var(--body))
}

.cat-items .owl-carousel .owl-nav div.owl-prev {
    right: 0;
    background: linear-gradient(to right, transparent, var(--body))
}

.cat-items .owl-carousel .owl-nav div.disabled,
.cat-items .owl-carousel .owl-nav div i {
    opacity: 0
}

.cat-items:hover .owl-carousel .owl-nav div i {
    opacity: 1
}

.cat-items a:hover {
    opacity: .8
}

.archive-slider .mini-p {
    float: none;
    text-align: right;
    display: inline-block;
    margin: 15px 7.5px
}

.archive-slider {
    padding: 0
}

@media only screen and (max-width:940px) {
    main {
        padding: 90px 0 0
    }

    .cat-items .title-asli .name {
        font-size: 15px
    }

    .cat-items a {
        margin: 15px 0 15px 15px
    }

    .cat-items a h3 {
        background: linear-gradient(to left, rgba(0, 0, 0, 0.2), var(--body));
        padding: 30px 20px;
        width: 180px;
        font-size: 15px
    }

}

@media only screen and (max-width:410px) {
    .archive-slider .mini-p {
        width: calc(33.33% - 15px);
        float: right
    }

    .archive-slider .mini-p figure img {
        height: 140px
    }
}