Rows on desktop scroll snap on mobile. Supports multiple aspect ratio. Intro text overflows and is scrollable.

square-rows

.square-rows {
 --img-w: 280px;
}

/* Ensure the container height matches the image width to maintain 1:1 */
.square-rows .g-array-item {
 position: relative;
 display: grid;
 grid-template-columns: var(--img-w) 1fr;
 grid-template-rows: auto 1fr auto;
 height: var(--img-w) !important;
 background: var(--surface-color);
 border: 1px solid rgba(var(--primary-color-rgb), 0.12);
 overflow: hidden;
 transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.square-rows .g-array-item:hover {
 box-shadow: 0 6px 18px rgba(var(--primary-color-rgb), 0.18);
 transform: translateY(-2px);
}

/* Strict 1:1 Aspect Ratio for Image */
.square-rows .g-array-item-image {
 grid-column: 1;
 grid-row: 1 / 4;
 height: 100% !important;
}

.square-rows .g-array-item-image img {
 display: block;
 width: 100% !important;
 height: 100% !important;
 aspect-ratio: 1 / 1 !important;
 object-fit: cover !important;
}

/* Scrollable Text Area */
.square-rows .g-array-item-text {
 position: relative;
 z-index: 30;
 grid-column: 2;
 padding: 0.5rem 1.5rem;
 overflow-y: auto;
 color: var(--primary-color);
 font-size: 0.95rem;
 line-height: 1.5;
 scrollbar-width: thin;
 scrollbar-color: rgba(var(--primary-color-rgb), 0.3) transparent;
}

@media (min-width: 50.99rem) {
 .square-rows .g-array-item-text {
 pointer-events: none;
 }
}

/* Webkit scrollbar styling for Chrome/Edge/Safari */
.square-rows .g-array-item-text::-webkit-scrollbar {
 width: 6px;
}

.square-rows .g-array-item-text::-webkit-scrollbar-thumb {
 background-color: rgba(var(--primary-color-rgb), 0.2);
 border-radius: 10px;
}

/* Padding and spacing for Title/Button */
.square-rows .g-array-item-title {
 grid-column: 2;
 padding: 1.25rem 1.5rem 0.25rem;
}

.square-rows .g-array-item-title a {
 color: var(--primary-color) !important;
 font-size: 1.5rem;
 font-weight: 700;
 text-decoration: none;
 transition: opacity 0.3s ease;
}

.square-rows .g-array-item-title a:hover {
 opacity: 0.8;
}

.square-rows .g-array-item-read-more {
 grid-column: 2;
 padding: 0.5rem 1.5rem 1.25rem;
 text-align: right;
 background: var(--surface-color);
 z-index: 10;
}

/* Primary color button */
.square-rows .g-array-item-read-more a.button {
 background-color: var(--primary-color) !important;
 color: #ffffff !important;
 border-color: var(--primary-color) !important;
 transition: background-color 0.3s ease, opacity 0.3s ease;
}

.square-rows .g-array-item-read-more a.button:hover {
 opacity: 0.85;
}

/* Make the entire card clickable via the read-more link */
.square-rows .g-array-item-read-more a.button::after {
 content: "";
 position: absolute;
 inset: 0;
 z-index: 40;
 cursor: pointer;
}

/* Mobile: Horizontal scroll-snap carousel */
@media (max-width: 50.99rem) {

 /* Scroll container — the Gantry .g-content-array wraps all .g-grid items */
 .square-rows .g-content-array {
 display: flex !important;
 flex-direction: row !important;
 flex-wrap: nowrap !important;
 overflow-x: auto;
 overflow-y: hidden;
 scroll-snap-type: x mandatory;
 -webkit-overflow-scrolling: touch;
 gap: 1rem;
 padding-left: 2rem !important;
 padding-right: 2rem !important;
 padding-top: 2rem !important;
 padding-bottom: 2rem !important;
 /* hide scrollbar but keep swipe */
 scrollbar-width: none;
 -ms-overflow-style: none;
 }

 .square-rows .g-content-array::-webkit-scrollbar {
 display: none;
 }

 /* Each .g-grid wraps one news item — make it a snap card at ~80vw
 so the next card peeks in and signals swipe-ability */
 .square-rows .g-content-array>.g-grid {
 flex: 0 0 80vw;
 max-width: 360px;
 scroll-snap-align: center;
 scroll-snap-stop: always;
 }

 /* Reset inner wrappers so the card fills properly */
 .square-rows .g-grid>.g-block,
 .square-rows .g-grid>.g-block>.g-content {
 width: 100%;
 max-width: 100%;
 margin: 0;
 padding: 0;
 }

 /* Card layout: image on top, content below */
 .square-rows .g-array-item {
 display: flex;
 flex-direction: column;
 height: auto !important;
 border-radius: 4px;
 overflow: hidden;
 }

 /* Square image on top */
 .square-rows .g-array-item-image {
 width: 100%;
 height: auto;
 aspect-ratio: 1 / 1;
 flex-shrink: 0;
 }

 .square-rows .g-array-item-image img {
 aspect-ratio: 1 / 1 !important;
 width: 100% !important;
 height: 100% !important;
 }

 .square-rows .g-array-item-title {
 padding: 1rem 1rem 0.25rem;
 }

 .square-rows .g-array-item-title a {
 font-size: 1.5rem;
 }

 /* Scrollable excerpt inside the card */
 .square-rows .g-array-item-text {
 padding: 0.25rem 1rem;
 max-height: 120px;
 overflow-y: auto;
 touch-action: pan-y;
 -webkit-overflow-scrolling: touch;
 }

 .square-rows .g-array-item-read-more {
 padding: 0.5rem 1rem 1rem;
 }
}