/* 2-column "Name | Value" table of <x-attribute-cell> inside <x-attribute-grid>, which prints two grids side by side
(col-md-6, stacked on mobile) and fills the left column first; each engine also gets its own pair.

The label column has a fixed width: every section renders two separate grids, and two auto-sized grids never line
up reliably (beside each other or stacked). 10rem fits most labels on one line, a really long one wraps. The value
column is minmax(0, 1fr) and a value breaks anywhere when it must: a word without a break ("Ijsselmeer/Markermeer,")
would otherwise widen the whole page on a phone.
--attr-row-border is the line between rows; a group without lines (BY) sets it to none. */
.boat-attr-grid {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    column-gap: 1.5rem;
}

.boat-attr-cell-label,
.boat-attr-cell-value {
    padding: .375rem 0;
    border-bottom: var(--attr-row-border, 1px solid #eef0f3);
}

.boat-attr-grid .boat-attr-cell-label:nth-last-child(-n+2),
.boat-attr-grid .boat-attr-cell-value:nth-last-child(-n+2) {
    border-bottom: none;
}

.boat-attr-cell-label {
    color: var(--text-soft);
}

.boat-attr-cell-value {
    font-weight: 600;
    overflow-wrap: anywhere;
}