.tg-visual {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(var(--bs-primary-rgb), .1);
    color: var(--bs-primary);
    font-size: 2rem;
}

.tg-visual-md {
    width: 56px;
    height: 56px;
    font-size: 1.5rem;
}

.tg-visual-sm {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
}

.tg-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tg-visual svg {
    width: 55%;
    height: 55%;
    fill: currentColor;
}

.tg-group-card,
.tg-tag-card {
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.tg-group-card:hover,
.tg-tag-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--bs-box-shadow);
    border-color: var(--bs-primary);
}

.tg-group-card.active {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), .25);
}

.tg-tag-card.active {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), .25);
}