Default styles for mass times blocks, scrollable overflow, consistent aspect ratio

j-mass-times

/* */

/* Desktop: Scoped layout to match sibling height */
.j-mass-times {
 display: flex !important;
 flex-direction: column;
}

.j-mass-times .g-particle {
 display: flex;
 flex-direction: column;
 flex: 1 1 auto;
 height: 100% !important;
 min-height: 0;
 position: relative;
}

/* Scrollable container */
.j-mass-times .g-content-array {
 position: absolute;
 inset: 0;
 overflow-y: auto;
 padding: 1.5rem !important;
 background: rgba(var(--secondary-color-rgb), 0.15);
 scrollbar-width: thin;
 scrollbar-color: rgb(var(--primary-color-rgb)) transparent;
 display: grid;
 align-items: center;
}

/* Remove margin from the text container */
.j-mass-times .g-array-item-text {
 margin-top: 0 !important;
}

/* Content styling */
.j-mass-times h3 {
 color: rgb(var(--primary-color-rgb));
 margin-top: 0;
}

.j-mass-times p {
 color: rgb(var(--primary-color-rgb));
}

/* Scrollbar styling */
.j-mass-times .g-content-array::-webkit-scrollbar {
 width: 6px;
}

.j-mass-times .g-content-array::-webkit-scrollbar-thumb {
 background: rgb(var(--primary-color-rgb));
 border-radius: 10px;
}

/* Mobile: Expand to fit all content */
@media (max-width: 50.99rem) {
 .j-mass-times .g-particle {
 height: auto !important;
 max-height: none !important;
 }

 .j-mass-times .g-content-array {
 position: relative;
 overflow-y: visible;
 height: auto !important;
 padding: 1rem 0;
 }
}

/* */