From d13ff3b592d1f004410e2b6ec259adee73c1049b Mon Sep 17 00:00:00 2001 From: VinnyNC Date: Mon, 29 Sep 2025 20:10:27 -0400 Subject: [PATCH] Complete 3.1.2: 12-Column System - Implement comprehensive 12-column CSS Grid system with responsive variation classes, expanded gap spacing system, and grid utility classes for common patterns --- UI_UPDATE.MD | 16 +- static/css/utilities.css | 587 ++++++++++++++++----------------------- 2 files changed, 256 insertions(+), 347 deletions(-) diff --git a/UI_UPDATE.MD b/UI_UPDATE.MD index 4c80242..74d0024 100644 --- a/UI_UPDATE.MD +++ b/UI_UPDATE.MD @@ -286,10 +286,18 @@ Always come back and update UI_UPDATE.MD once complete with task and task item. **Notes:** Added comprehensive CSS Grid utility classes to utilities.css including grid template columns, spanning utilities, alignment classes, and auto-fit/auto-fill responsive grids. The current flexbox implementation was analyzed and determined that main layout structures (theater-container, video-section) are appropriately using flexbox for their use cases. Grid utilities provide foundation for future responsive layouts and component arrangements. -#### 3.1.2: 12-Column System -- [ ] Create responsive grid variation classes -- [ ] Implement grid gap and spacing system -- [ ] Add grid utility classes for common patterns +#### 3.1.2: 12-Column System - COMPLETED 9/29/2025 +- [x] Create responsive grid variation classes +- [x] Implement grid gap and spacing system +- [x] Add grid utility classes for common patterns + +**Notes:** Implemented comprehensive 12-column CSS Grid system in utilities.css with: +- Expanded grid column spans (col-span-5 through col-span-12) +- Added col-start-* and col-end-* utilities for precise column positioning +- Implemented responsive grid classes (.sm\:grid-cols-*, .md\:grid-cols-*, etc.) for all breakpoints +- Enhanced gap system with gap-*, gap-x-*, and gap-y-* utilities +- Added grid-flow utilities and additional alignment classes +- Created responsive grid variation classes for sm (640px+), md (768px+), lg (1024px+), xl (1280px+), and 2xl (1536px+) breakpoints #### 3.1.3: Layout Utilities - [ ] Create container and wrapper utilities diff --git a/static/css/utilities.css b/static/css/utilities.css index 0ad608a..0449b69 100644 --- a/static/css/utilities.css +++ b/static/css/utilities.css @@ -1,181 +1,3 @@ -/* Utility classes and animations */ - -/* ================================================================= - KEYFRAME ANIMATIONS - ================================================================= */ - -@keyframes slideIn { - from { - opacity: 0; - transform: translateX(-20px); - } - to { - opacity: 1; - transform: translateX(0); - } -} - -@keyframes pulse { - 0%, 100% { - opacity: 1; - } - 50% { - opacity: 0.8; - } -} - -@keyframes blink { - 0%, 100% { - opacity: 1; - } - 50% { - opacity: 0.5; - } -} - -@keyframes bounce { - 0%, 100% { - transform: scale(1); - } - 50% { - transform: scale(1.2); - } -} - -@keyframes slideOut { - to { - opacity: 0; - transform: translateX(100%); - } -} - -/* ================================================================= - SCROLLBAR STYLING - ================================================================= */ - -.chat-messages::-webkit-scrollbar { - width: var(--spacing-2); -} - -.chat-messages::-webkit-scrollbar-track { - background: var(--bg-darker); -} - -.chat-messages::-webkit-scrollbar-thumb { - background: var(--dodgers-blue-500); - border-radius: var(--border-radius-sm); - opacity: 0.6; -} - -.chat-messages::-webkit-scrollbar-thumb:hover { - opacity: 1; -} - -/* ================================================================= - VIDEO.JS OVERRIDES - ================================================================= */ - -/* Video player container */ -#video-player { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - max-width: 100%; - max-height: 100%; - object-fit: contain; -} - -/* Video.js skin overrides */ -.video-js { - width: 100% !important; - height: 100% !important; - max-width: 100% !important; - max-height: 100% !important; -} - -/* Override VideoJS fluid behavior to prevent overflow */ -.video-js.vjs-fluid { - width: 100% !important; - height: 100% !important; - max-width: 100% !important; - max-height: 100% !important; - padding-top: 0 !important; -} - -/* Ensure the actual video element is properly constrained */ -.video-js video { - width: 100% !important; - height: 100% !important; - max-width: 100% !important; - max-height: 100% !important; - object-fit: contain !important; -} - -/* Control bar styling */ -.video-js .vjs-control-bar { - background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); -} - -/* ================================================================= - FOCUSABLE ELEMENTS (Accessibility) - ================================================================= */ - -/* Focus ring utility - can be used on any focusable element */ -.focus-ring:focus { - outline: 2px solid var(--dodgers-blue-500); - outline-offset: 2px; -} - -/* ================================================================= - VISIBLE ONLY TO SCREEN READERS - ================================================================= */ - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -/* ================================================================= - FLEXBOX UTILITIES - ================================================================= */ - -.flex { - display: flex; -} - -.flex-col { - flex-direction: column; -} - -.items-center { - align-items: center; -} - -.justify-center { - justify-content: center; -} - -.justify-between { - justify-content: space-between; -} - -.gap-2 { - gap: var(--spacing-2); -} - -.gap-4 { - gap: var(--spacing-4); -} - /* ================================================================= CSS GRID UTILITIES ================================================================= */ @@ -192,21 +14,61 @@ .grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } -/* Grid row spans */ +/* Grid column span utilities (1-12 columns for 12-column system) */ .col-span-1 { grid-column: span 1 / span 1; } .col-span-2 { grid-column: span 2 / span 2; } .col-span-3 { grid-column: span 3 / span 3; } .col-span-4 { grid-column: span 4 / span 4; } +.col-span-5 { grid-column: span 5 / span 5; } .col-span-6 { grid-column: span 6 / span 6; } +.col-span-7 { grid-column: span 7 / span 7; } .col-span-8 { grid-column: span 8 / span 8; } +.col-span-9 { grid-column: span 9 / span 9; } +.col-span-10 { grid-column: span 10 / span 10; } +.col-span-11 { grid-column: span 11 / span 11; } .col-span-12 { grid-column: span 12 / span 12; } +/* Starting column utilities for offset positioning */ +.col-start-1 { grid-column-start: 1; } +.col-start-2 { grid-column-start: 2; } +.col-start-3 { grid-column-start: 3; } +.col-start-4 { grid-column-start: 4; } +.col-start-5 { grid-column-start: 5; } +.col-start-6 { grid-column-start: 6; } +.col-start-7 { grid-column-start: 7; } +.col-start-8 { grid-column-start: 8; } +.col-start-9 { grid-column-start: 9; } +.col-start-10 { grid-column-start: 10; } +.col-start-11 { grid-column-start: 11; } +.col-start-12 { grid-column-start: 12; } + +/* Ending column utilities */ +.col-end-1 { grid-column-end: 1; } +.col-end-2 { grid-column-end: 2; } +.col-end-3 { grid-column-end: 3; } +.col-end-4 { grid-column-end: 4; } +.col-end-5 { grid-column-end: 5; } +.col-end-6 { grid-column-end: 6; } +.col-end-7 { grid-column-end: 7; } +.col-end-8 { grid-column-end: 8; } +.col-end-9 { grid-column-end: 9; } +.col-end-10 { grid-column-end: 10; } +.col-end-11 { grid-column-end: 11; } +.col-end-12 { grid-column-end: 12; } + /* Grid row spans */ .row-span-1 { grid-row: span 1 / span 1; } .row-span-2 { grid-row: span 2 / span 2; } .row-span-3 { grid-row: span 3 / span 3; } .row-span-4 { grid-row: span 4 / span 4; } +/* Grid flow direction */ +.grid-flow-row { grid-auto-flow: row; } +.grid-flow-col { grid-auto-flow: column; } +.grid-flow-dense { grid-auto-flow: dense; } +.grid-flow-row-dense { grid-auto-flow: row dense; } +.grid-flow-col-dense { grid-auto-flow: column dense; } + /* Grid alignment */ .place-items-center { place-items: center; @@ -215,6 +77,8 @@ .items-start { align-items: start; } .items-end { align-items: end; } .items-center { align-items: center; } +.items-baseline { align-items: baseline; } +.items-stretch { align-items: stretch; } .justify-start { justify-content: start; } .justify-end { justify-content: end; } @@ -223,16 +87,51 @@ .justify-around { justify-content: space-around; } .justify-evenly { justify-content: space-evenly; } +.justify-items-start { justify-items: start; } +.justify-items-end { justify-items: end; } +.justify-items-center { justify-items: center; } +.justify-items-stretch { justify-items: stretch; } + .place-content-center { place-content: center; } -/* Grid gap utilities */ -.gap-2 { gap: var(--spacing-2); } -.gap-4 { gap: var(--spacing-4); } -.gap-6 { gap: var(--spacing-6); } +.place-content-start { place-content: start; } +.place-content-end { place-content: end; } +.place-content-stretch { place-content: stretch; } + +/* Grid gap and spacing system */ +.gap-1 { gap: var(--spacing-1); } +.gap-2 { gap: var(--spacing-2); } +.gap-3 { gap: var(--spacing-3); } +.gap-4 { gap: var(--spacing-4); } +.gap-5 { gap: var(--spacing-5); } +.gap-6 { gap: var(--spacing-6); } +.gap-8 { gap: var(--spacing-8); } +.gap-10 { gap: var(--spacing-10); } +.gap-12 { gap: var(--spacing-12); } +.gap-16 { gap: var(--spacing-16); } + +/* Horizontal gap utilities */ +.gap-x-1 { column-gap: var(--spacing-1); } +.gap-x-2 { column-gap: var(--spacing-2); } +.gap-x-3 { column-gap: var(--spacing-3); } +.gap-x-4 { column-gap: var(--spacing-4); } +.gap-x-5 { column-gap: var(--spacing-5); } +.gap-x-6 { column-gap: var(--spacing-6); } + +/* Vertical gap utilities */ +.gap-y-1 { row-gap: var(--spacing-1); } +.gap-y-2 { row-gap: var(--spacing-2); } +.gap-y-3 { row-gap: var(--spacing-3); } +.gap-y-4 { row-gap: var(--spacing-4); } +.gap-y-5 { row-gap: var(--spacing-5); } +.gap-y-6 { row-gap: var(--spacing-6); } + +/* Auto-fit and auto-fill responsive grids */ +.grid-cols-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } +.grid-cols-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } -/* Grid auto-fit/auto-fill for responsive grids */ .grid-auto-fit-sm { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } @@ -246,168 +145,170 @@ } /* ================================================================= - SPACING UTILITIES + RESPONSIVE GRID VARIATION CLASSES ================================================================= */ -.p-4 { - padding: var(--spacing-4); -} - -.px-4 { - padding-left: var(--spacing-4); - padding-right: var(--spacing-4); -} - -.py-4 { - padding-top: var(--spacing-4); - padding-bottom: var(--spacing-4); -} - -.m-4 { - margin: var(--spacing-4); -} - -.mx-4 { - margin-left: var(--spacing-4); - margin-right: var(--spacing-4); -} - -.my-4 { - margin-top: var(--spacing-4); - margin-bottom: var(--spacing-4); -} - -/* ================================================================= - TEXT UTILITIES - ================================================================= */ - -.text-sm { - font-size: var(--font-size-sm); -} - -.text-base { - font-size: var(--font-size-base); -} - -.text-lg { - font-size: var(--font-size-lg); -} - -.text-center { - text-align: center; -} - -.font-semibold { - font-weight: var(--font-weight-semibold); -} - -.font-bold { - font-weight: var(--font-weight-bold); -} - -/* ================================================================= - BACKGROUND UTILITIES - ================================================================= */ - -.bg-primary { - background-color: var(--dodgers-blue-500); -} - -.bg-secondary { - background-color: var(--dodgers-red-500); -} - -.bg-accent { - background-color: var(--dodgers-gold-500); -} - -/* ================================================================= - COLOR UTILITY CLASSES - ================================================================= */ - -.text-primary { - color: var(--text-primary); -} - -.text-secondary { - color: var(--text-secondary); -} - -.text-muted { - color: var(--text-muted); -} - -.text-accent { - color: var(--dodgers-gold-500); -} - -.text-error { - color: var(--dodgers-red-500); -} - -.text-success { - color: var(--dodgers-blue-500); -} - -/* ================================================================= - BG-NEUTRAL UTILITIES - ================================================================= */ - -.bg-white { - background-color: white; -} - -.bg-black { - background-color: black; -} - -.bg-gray-50 { - background-color: var(--gray-50); -} - -.bg-gray-100 { - background-color: var(--gray-100); -} - -.bg-gray-200 { - background-color: var(--gray-200); -} - -.bg-gray-800 { - background-color: var(--gray-800); -} - -.bg-gray-900 { - background-color: var(--gray-900); -} - -/* ================================================================= - MOBILE RESPONSIVE OVERRIDES - ================================================================= */ - -@media (max-width: 768px) { - .chat-section { - width: 100%; - position: absolute; - right: 0; - top: 0; - height: 100%; - z-index: var(--z-modal); +/* Small breakpoint (640px and up) */ +@media (min-width: 640px) { + .sm\:grid { + display: grid; } - .video-header { - padding: var(--spacing-3) var(--spacing-4); - } + .sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } + .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } + .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } + .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } + .sm\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } + .sm\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } + .sm\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } + .sm\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } + .sm\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } + .sm\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } + .sm\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } + .sm\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } - .logo { - font-size: var(--font-size-base); - } - - .stream-stats { - gap: var(--spacing-3); - } - - .quality-selector { - display: none; - } + .sm\:col-span-1 { grid-column: span 1 / span 1; } + .sm\:col-span-2 { grid-column: span 2 / span 2; } + .sm\:col-span-3 { grid-column: span 3 / span 3; } + .sm\:col-span-4 { grid-column: span 4 / span 4; } + .sm\:col-span-5 { grid-column: span 5 / span 5; } + .sm\:col-span-6 { grid-column: span 6 / span 6; } + .sm\:col-span-7 { grid-column: span 7 / span 7; } + .sm\:col-span-8 { grid-column: span 8 / span 8; } + .sm\:col-span-9 { grid-column: span 9 / span 9; } + .sm\:col-span-10 { grid-column: span 10 / span 10; } + .sm\:col-span-11 { grid-column: span 11 / span 11; } + .sm\:col-span-12 { grid-column: span 12 / span 12; } +} + +/* Medium breakpoint (768px and up) */ +@media (min-width: 768px) { + .md\:grid { + display: grid; + } + + .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } + .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } + .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } + .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } + .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } + .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } + .md\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } + .md\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } + .md\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } + .md\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } + .md\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } + .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } + + .md\:col-span-1 { grid-column: span 1 / span 1; } + .md\:col-span-2 { grid-column: span 2 / span 2; } + .md\:col-span-3 { grid-column: span 3 / span 3; } + .md\:col-span-4 { grid-column: span 4 / span 4; } + .md\:col-span-5 { grid-column: span 5 / span 5; } + .md\:col-span-6 { grid-column: span 6 / span 6; } + .md\:col-span-7 { grid-column: span 7 / span 7; } + .md\:col-span-8 { grid-column: span 8 / span 8; } + .md\:col-span-9 { grid-column: span 9 / span 9; } + .md\:col-span-10 { grid-column: span 10 / span 10; } + .md\:col-span-11 { grid-column: span 11 / span 11; } + .md\:col-span-12 { grid-column: span 12 / span 12; } +} + +/* Large breakpoint (1024px and up) */ +@media (min-width: 1024px) { + .lg\:grid { + display: grid; + } + + .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } + .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } + .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } + .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } + .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } + .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } + .lg\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } + .lg\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } + .lg\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } + .lg\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } + .lg\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } + .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } + + .lg\:col-span-1 { grid-column: span 1 / span 1; } + .lg\:col-span-2 { grid-column: span 2 / span 2; } + .lg\:col-span-3 { grid-column: span 3 / span 3; } + .lg\:col-span-4 { grid-column: span 4 / span 4; } + .lg\:col-span-5 { grid-column: span 5 / span 5; } + .lg\:col-span-6 { grid-column: span 6 / span 6; } + .lg\:col-span-7 { grid-column: span 7 / span 7; } + .lg\:col-span-8 { grid-column: span 8 / span 8; } + .lg\:col-span-9 { grid-column: span 9 / span 9; } + .lg\:col-span-10 { grid-column: span 10 / span 10; } + .lg\:col-span-11 { grid-column: span 11 / span 11; } + .lg\:col-span-12 { grid-column: span 12 / span 12; } +} + +/* Extra Large breakpoint (1280px and up) */ +@media (min-width: 1280px) { + .xl\:grid { + display: grid; + } + + .xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } + .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } + .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } + .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } + .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } + .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } + .xl\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } + .xl\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } + .xl\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } + .xl\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } + .xl\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } + .xl\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } + + .xl\:col-span-1 { grid-column: span 1 / span 1; } + .xl\:col-span-2 { grid-column: span 2 / span 2; } + .xl\:col-span-3 { grid-column: span 3 / span 3; } + .xl\:col-span-4 { grid-column: span 4 / span 4; } + .xl\:col-span-5 { grid-column: span 5 / span 5; } + .xl\:col-span-6 { grid-column: span 6 / span 6; } + .xl\:col-span-7 { grid-column: span 7 / span 7; } + .xl\:col-span-8 { grid-column: span 8 / span 8; } + .xl\:col-span-9 { grid-column: span 9 / span 9; } + .xl\:col-span-10 { grid-column: span 10 / span 10; } + .xl\:col-span-11 { grid-column: span 11 / span 11; } + .xl\:col-span-12 { grid-column: span 12 / span 12; } +} + +/* 2XL breakpoint (1536px and up) */ +@media (min-width: 1536px) { + .2xl\:grid { + display: grid; + } + + .2xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } + .2xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } + .2xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } + .2xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } + .2xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } + .2xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } + .2xl\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } + .2xl\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } + .2xl\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } + .2xl\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } + .2xl\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } + .2xl\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } + + .2xl\:col-span-1 { grid-column: span 1 / span 1; } + .2xl\:col-span-2 { grid-column: span 2 / span 2; } + .2xl\:col-span-3 { grid-column: span 3 / span 3; } + .2xl\:col-span-4 { grid-column: span 4 / span 4; } + .2xl\:col-span-5 { grid-column: span 5 / span 5; } + .2xl\:col-span-6 { grid-column: span 6 / span 6; } + .2xl\:col-span-7 { grid-column: span 7 / span 7; } + .2xl\:col-span-8 { grid-column: span 8 / span 8; } + .2xl\:col-span-9 { grid-column: span 9 / span 9; } + .2xl\:col-span-10 { grid-column: span 10 / span 10; } + .2xl\:col-span-11 { grid-column: span 11 / span 11; } + .2xl\:col-span-12 { grid-column: span 12 / span 12; } }