.categories-page .grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xl);
}

.categories-page .card {
    display: flex;
    flex-direction: column;
    background: var(--color-block);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    width: calc(33.333% - var(--space-xl) * 2 / 3);
    transition: transform .3s ease;
    overflow: hidden;
    box-sizing: border-box;
}

.categories-page .card:hover {
    transform: translateY(-4px);
}

.categories-page .card .thumb {
    overflow: hidden;
    border-radius: 6px 6px 0 0;
}

.categories-page .card .thumb img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

.categories-page .card:hover .thumb img {
    transform: scale(1.04);
}

.categories-page .card .body {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    padding: var(--space-xl);
}

.categories-page .card .name {
    font-size: var(--font-sm);
    font-weight: 700;
    color: var(--color-black);
    line-height: 1;
    transition: color .3s ease;
}

.categories-page .card:hover .name {
    color: var(--color-primary);
}

.categories-page .card .description {
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--color-black-gray);
}

.categories-page .card .count {
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--color-primary);
}

@media (max-width: 768px) {
    .categories-page .grid {
        gap: var(--space-lg);
    }

    .categories-page .card {
        width: calc(50% - var(--space-lg) / 2);
    }

    .categories-page .card .body {
        gap: var(--space-lg);
        padding: var(--space-lg);
    }
}

@media (max-width: 620px) {
    .categories-page .card {
        width: 100%;
    }
}