/* Packaging Grid — shared structure for all packaging widgets.
   Visual chrome (colors, padding, borders, hover, typography) is owned by
   each widget's Style-tab controls. */

.pkg-grid__section { margin-bottom: 3rem; }
.pkg-grid__section:last-child { margin-bottom: 0; }

.pkg-grid__items {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* overridden by the Columns control */
    gap: 24px;                             /* overridden by the Gap control */
    align-items: end;
}

/* Repeated grid item. */
.pkg-item {
    display: block;
    text-decoration: none;
    color: inherit;
}
.pkg-item__media img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}
.pkg-item__body { text-align: center; }
.pkg-item__title {
    display: block;
    font-weight: 600;
    margin-top: 0.5rem;
}
.pkg-item__meta {
    display: block;
    opacity: 0.7;
}