.showcase-table .modal.fade.in{
    display: grid !important;
    place-content: center
}

.showcase-table .modal-dialog-centered {
    width: fit-content;
    max-width: 90vw
}

.showcase-table .modal-header {
    display: grid;
    justify-items: start;
    padding: 0 1rem 1rem;
}
.showcase-table .modal-content {
    gap: 1rem
}

.showcase-table .btn, .showcase-table .btn:hover {
    appearance: none;
    background: none;
    border: none;
    outline: none;
    color: var(--blue-auth);
    font-family: var(--ff-semibold)
}

.showcase-table .btn:active, .showcase-table .btn.active {
    box-shadow: none
}

.fade-in-content #showcaseDesktop {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    max-width: calc(3 * 350px + 2rem * 2);
    justify-content: center;
    align-items: start;
    gap: 2rem;
    opacity: 0;
    animation: fadeIn 0.5s forwards;
    animation-delay: 0.3s;
}

.fade-in-content #showcaseAccordion {
    grid-template-columns: 1fr
}

@keyframes fadeIn {
    to { opacity: 1 }
}

.showcaseItemPricelist {
    display: table;
    border: 1px solid var(--grey-light);
    border-radius: 9px;
    box-shadow: 0 0 14px rgb(0 0 0 / 2%);
    overflow: hidden
}

.showcaseItemPricelist-row {
    display: table-row
}

.showcaseItemPricelist-row:first-child label, .showcaseItemPricelist-row label{
    font-family: var(--ff-regular);
    font-weight: normal
}

.showcaseItemPricelist-row:not(:first-of-type) .showcaseItemPricelist-row-value {
    font-family: var(--ff-semibold);
    font-weight: normal;
}

.showcaseItemPricelist-row:nth-child(odd) {
    background-color: var(--grey-light)
}

.showcaseItemPricelist-row-key, .showcaseItemPricelist-row-value {
    display: table-cell;
    padding: 8px 12px
}