:root {
    --main-txt-clr: rgb(15 15 15);
    --main-bg-heading-clr: #b7ede1ff;
    --main-trans: .3s;
}

.app-categories-holder {
    display: grid;
    grid-template-columns: repeat(4, minmax(200px, 1fr));
    row-gap: 40px;
    column-gap: 5px;
    margin-top: 50px;
    place-items: center;
}

.article-cat {
    position: relative;
    width: 200px;
    height: 200px
}

.article-cat a {
    width: 200px;
    height: 200px
}

.article-cat img {
    width: 200px;
    height: 200px;
    object-fit: contain;
    border-radius: 10px;
}

@media (max-width: 815px) {
    .app-categories-holder {
        grid-template-columns: repeat(4, minmax(150px, 1fr));
        row-gap: 10px;
    }

    .article-cat {
        width: 100px;
        height: 100px;
    }

    .article-cat a {
        width: 100px;
        height: 100px;
    }

    .article-cat img {
        height: 100px;
        width: 100px;
    }
}

@media (max-width: 676px) {
    .app-categories-holder {
        grid-template-columns: repeat(4, minmax(130px, 1fr))
    }


}

@media (max-width: 584px) {
    .app-categories-holder {
        grid-template-columns: repeat(4, minmax(100px, 1fr))
    }

    .article-cat {
        width: 80px;
        height: 80px;
    }

    .article-cat a {
        width: 80px;
        height: 80px;
    }

    .article-cat img {
        height: 80px;
        width: 80px;
    }
}

@media (max-width: 480px) {
    .app-categories-holder {
        grid-template-columns: repeat(4, minmax(80px, 1fr))
    }
}

@media (max-width: 415px) {
    .app-categories-holder {
        grid-template-columns: repeat(4, minmax(70px, 1fr))
    }
}

@media (max-width: 310px) {
    .app-categories-holder {
        grid-template-columns: repeat(4, minmax(60px, 1fr))
    }
}

@media (max-width: 584px) {
    .app-categories-holder {
        grid-template-columns: repeat(4, minmax(100px, 1fr))
    }
}

@media (max-width: 480px) {
    .app-categories-holder {
        grid-template-columns: repeat(4, minmax(80px, 1fr))
    }
}

@media (max-width: 415px) {
    .app-categories-holder {
        grid-template-columns: repeat(4, minmax(70px, 1fr))
    }
}

@media (max-width: 310px) {
    .app-categories-holder {
        grid-template-columns: repeat(4, minmax(60px, 1fr))
    }

    .article-cat {
        width: 60px;
        height: 60px;
    }

    .article-cat a {
        width: 60px;
        height: 60px;
    }

    .article-cat img {
        height: 60px;
        width: 60px;
    }
}

.s-product-card-content-footer.rounded-lg button, .tabs__outline .tab-trigger.is-active, .text-btn,.tabs a.inactive, .s-add-product-button-with-quick-buy .s-button-wrap:nth-child(1){
  color: white !important;
}