I have a grid column layout of: [full-width] [breakout] [content] [breakout] [full-width].
Within the [breakout] column I have an icon, and in the [content] column I have a section header, and originally wanted my scrollable highlight cards. However, this hides/clips the content under the left columns when scrolling.
To avoid this, I have the cards using the [full-width] but they are not aligned to the <h2> and <p> elements above in the section header.
I want the first card to left-align to the section header <h2> above. I'd like to avoid using the current spacer div I'm using in the flexbox or estimating a best margin/padding to avoid potential misalignment.
https://jsfiddle.net/joshhhh/5m9r2yab/2/
/* -------------------------- Global Styles & Reset ------------------------- */:root { --color-background: rgba(155, 215, 255, 0.5); --color-main: #60935d; --color-accent: #fdca40; --color-accent-hover: #ffd256; --color-black: rgb(34, 32, 33); --color-blackdata: 34, 32, 33; --color-white: #fff; --spacing-unit: 1rem; --margin-xxs: calc(var(--spacing-unit) / 4); --margin-xs: calc(var(--spacing-unit) / 2); --margin-s: var(--spacing-unit); --margin-m: calc(var(--spacing-unit) * 2); --margin-l: calc(var(--spacing-unit) * 3); --margin-xl: calc(var(--spacing-unit) * 4); --margin-xxl: calc(var(--spacing-unit) * 7); --borderrad: 25px;}* { outline: solid red 1px;}body { margin: 0; padding: 0; background: linear-gradient( to bottom, rgba(155, 215, 255, 0.5) 0%, rgba(240, 249, 255, 0.5) 100% ); overflow-x: hidden;}*, *:before, *:after { box-sizing: border-box;}* { margin: 0;}/* ------------------------------ Size & Layout ----------------------------- */.section { width: 100%;}.container { width: 100%;}/* Body Grid Layout */.content-grid { display: grid; grid-template-columns: [full-width-start] var(--margin-l) [breakout-start] var(--margin-xxl) [content-start] 1fr [content-end] var(--margin-xxl) [breakout-end] var(--margin-l) [full-width-end]; position: relative;}.content-grid > * { grid-column: content;}.content-grid > .breakout { grid-column: breakout;}.full-width > * { grid-column: full-width;}/* --------------------------------- Header --------------------------------- */.header-tag { font: var(--h2-font); transition: transform .5s ease; line-height: 1; grid-column: breakout-start; align-self: start; justify-self: center;}.header-title { color: var(--color-black); position: relative; padding-bottom: 0.25rem; display: inline-block;}.section-header .content-grid { display: grid; grid-template-columns: auto 1fr; column-gap: var(--margin-s); margin-bottom: var(--margin-m);}.header-text { grid-column: content-start;}.highlight-section, .container, .section-header, .content-grid { overflow: visible;}.media-scroller { display: flex; gap: var(--margin-m); overflow-x: auto; overflow-y: visible; position: relative; z-index: 1; scroll-snap-type: x mandatory; scroll-padding-left: var(--margin-xxl); padding-block: var(--margin-m); grid-column: full-width;}/* --------------------------- Summer Menu Scroll --------------------------- */.scroll-spacer { flex: 0 0 var(--margin-xxl); pointer-events: none;}.highlight-card { flex: 0 0 auto; scroll-snap-align: start; width: 20%; aspect-ratio: 4 / 5; height: auto; background: var(--color-white); border-radius: var(--borderrad); padding: var(--margin-m); box-shadow: 0 4px 8px rgba(var(--color-blackdata), 0.1); transition: 200ms ease-in-out;}.highlight-card:hover { transform: translateY(-2px) scale(1.015); transition: 200ms ease-in-out; box-shadow: 4px 8px 20px rgba(var(--color-blackdata), 0.25); position: relative; z-index: 25;}<div class="highlight-section"><div class="container"><div class="section-header content-grid"><div class="header-tag">❤️</div><div class="header-text"><h2 class="header-title">Our Specialties</h2><p class="header-subtitle"> Check out what we've been brewing up this summer!</p></div><div class="media-scroller"><div class="scroll-spacer"></div><div class="highlight-card"><div class="highlight-card-content"><h3>Frozen Espresso is back!</h3></div></div><div class="highlight-card"><div class="highlight-card-content"><h3>Chai Watermelon</h3><p>Seedless and sweet, perfect for the summer season!</p></div></div><div class="highlight-card"><div class="highlight-card-content"><h3>Blueberry Brewed Tea</h3><p>Flavorful & fresh, picked from local farms.</p></div></div><div class="highlight-card"><div class="highlight-card-content"><h3>Tiramisu Frappe</h3><p>Sip down a sweet and savory treat!</p></div></div><div class="highlight-card"><div class="highlight-card-content"><h3>NEW! Acai Bowls</h3><p>New Acai Bowls made in house daily.</p></div></div><div class="highlight-card"><a href="" target="_blank" rel="noopener noreferrer" aria-label="Get directions"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000" id="Circle-Arrow-Up-Right--Streamline-Tabler-Filled"><path d="M17 3.34a10 10 0 1 1 -14.995 8.984L2 12l0.005 -0.324A10 10 0 0 1 17 3.34zM15 8H9l-0.117 0.007A1 1 0 0 0 8 9l0.007 0.117A1 1 0 0 0 9 10h3.584l-4.291 4.293 -0.083 0.094a1 1 0 0 0 1.497 1.32L14 11.414V15l0.007 0.117A1 1 0 0 0 16 15V9l-0.007 -0.117 -0.029 -0.149 -0.035 -0.105 -0.054 -0.113 -0.071 -0.111a1.01 1.01 0 0 0 -0.097 -0.112l-0.09 -0.08 -0.096 -0.067 -0.098 -0.052 -0.11 -0.044 -0.112 -0.03 -0.126 -0.017L15 8z" stroke-width="1"></path></svg></a><div class="highlight-card-content"><h3>And a whole lot more!</h3><p>Visit the shop and see what else we're brewing!</p></div></div><div class="scroll-spacer"></div></div></div></div></div>