.hero-categories {
    background-image: url("/assets/imgs/bg-categories.webp");
    background-position: center;
    background-repeat: no-repeat;
}

.categories-section {
    margin-top: 45px;
    margin-bottom: 70px;
}

.categories-section .categories-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}

.categories-section .category-card {
    max-width: none;
}

.categories-section .category-card:hover {
    transform: scale(1.05);
}

@media screen and (max-width: 992px) {
    .categories-section {
        margin-block: 40px;
    }
}