.mybb-price-lists {
    container-type: inline-size;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    column-gap: 15px;
    font-size: 20px;
}

.mybb-price-lists__item {
    display: contents;
}

.mybb-price-lists__name,
.mybb-price-lists__separator,
.mybb-price-lists__price {
    padding: 12px 0;
}

.mybb-price-lists__name {
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.mybb-price-lists__separator {
    border-bottom-style: dotted;
    border-bottom-width: 2px;
    border-bottom-color: currentColor;
    position: relative;
    top: -0.25em;
}

.mybb-price-lists__price {
    white-space: nowrap;
}

/* Heading and Text Block items span all three grid columns, forcing their own row */
.mybb-price-lists__item--heading,
.mybb-price-lists__item--text {
    display: block;
    grid-column: 1 / -1;
}

.mybb-price-lists__item--heading h2,
.mybb-price-lists__item--heading h3,
.mybb-price-lists__item--heading h4,
.mybb-price-lists__item--heading h5 {
    margin: 0;
    padding: 16px 0 4px;
}

.mybb-price-lists__item--text {
    padding: 4px 0 8px;
}

.mybb-price-lists__item--text p:first-child { margin-top: 0; }
.mybb-price-lists__item--text p:last-child  { margin-bottom: 0; }

/* Narrow container: drop to 2 columns, hide the dotted separator */
@container (max-width: 380px) {
    .mybb-price-lists {
        column-gap: 8px;
    }
    
    .mybb-price-lists__name,
    .mybb-price-lists__price {
        white-space: normal;
    }
}

@media (max-width: 480px) {
    .mybb-price-lists {
        column-gap: 4px;
        font-size: 0.9em;
    }

    .mybb-price-lists__name,
    .mybb-price-lists__separator,
    .mybb-price-lists__price {
        padding: 10px 0;
    }
}