.showcase-section{
    background-color: var(--surface-brand-soft);
}

.showcase-section:has(.showcase-no-tab){
    background-color: var(--surface-brand-soft);
}

.showcase-no-tab{
    background-color: var(--surface-brand);
    padding: var(--sp-md);
    border-radius: var(--radius-lg);
}

.showcase-no-tab .showcase-detail .text{
    color: var(--base-white);
}

.showcase{
    display: flex;
    align-items: start;
    gap: var(--sp-lg);
    justify-content: center;
    max-width: var(--br-xl);
    margin: 0 auto;
    flex-direction: column;
}

.showcase .showcase-detail{
    width: 100%;
}

.showcase .showcase-tabbed-group{
    width: 100%;
    padding: var(--sp-md);
    border-radius: var(--radius-lg);
    background: var(--surface-brand);
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
}

.showcase-tabbed-group .showcase-badge-group{
    display: flex;
    flex-direction: column;
    gap: var(--sp-s);
}

.showcase-tabbed-group .showcase-badge-group .text{
    color: var(--base-white);
}

.showcase-badge-group .showcase-badge-list{
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-sm)
}

.showcase-badge-group .showcase-badge-list .badge{
    cursor: pointer;
}

.showcase-badge-group .showcase-badge-list .badge.is-active{
    cursor: pointer;
}

.showcase-tabbed-content-group .showcase-tab-panel .detail-group{
    margin-bottom: var(--sp-md);
}

.showcase-tab-panel .detail-group .text{
    color: var(--base-white);
}

.showcase-tabbed-card-list{
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-sm);
}

.showcase-tabbed-card-list .card{
    flex: 0 0 calc(33.33% - var(--sp-sm));
    flex-grow: 1;
}


@media (max-width: 991px){
    .showcase-tabbed-card-list .card{
        flex: 0 0 calc(50% - var(--sp-sm));
    }
}

@media (max-width: 640px){
    .showcase-tabbed-card-list .card{
        flex: 0 0 calc(100%);
    }
}