.cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .5rem;
    gap: .5rem;
    width: 100%;

    background-color: var(--bg-default);
    border-radius: .5rem;
    border: 1px solid var(--border-subtle);

    cursor: pointer;
    transition: background-color .3s, transform .2s ease;
    /* transform-origin: left center; */
}

.cat-card .ph-duotone {
    color: var(--icon-brand-yellow);
    font-size: 2rem;
}

    .cat-card .headingS,.headingM {
        color: var(--text-brand-blue);
    }

    .cat-card:hover {
        background-color: var(--bg-darker);
        transform: scaleX(1.02);
    }

    .cat-card.active,
    .cat-card[aria-pressed="true"] {
        background-color: var(--bg-darker);
        border-color: var(--border-brand-blue, var(--border-subtle));
    }


.videoCard .card-img-top {
    aspect-ratio: 6 / 4.5;
    object-fit: cover;
}


.videoCard .labelS {
    color: var(--text-label);
}

.videoCard .headingS {
    color: var(--text-brand-blue);
}