/* * Reclaim `.container` from Tailwind. * * The site loads two CSS frameworks on every page: * - Bootstrap 5 CSS (_LayoutHeader.cshtml) .container caps at 1320px * - Tailwind Play CDN (_LayoutScripts.cshtml) .container caps at 1536px * * Tailwind's runtime injects its stylesheet into AFTER every , so on * equal specificity its max-width wins and the whole site silently runs on * Tailwind's 1536px cap instead of Bootstrap's 1320px. At a 1536px viewport - which * is exactly what a 1920 monitor at Windows 125% scaling produces - the container * becomes as wide as the screen and the side padding collapses to 12px. * * Neither framework is at fault on its own; it is purely load order. Rather than * remove Tailwind (200 views may use its utility classes), this restores Bootstrap's * ladder using `body .container` (0,1,1) which outranks `.container` (0,1,0), so it * wins regardless of injection order and needs no !important. * * Bootstrap's padding and `margin: auto` already survive the clash - only max-width * needs reclaiming. To widen the site later, change the 1400px value below. * * See GIGW_COMPLIANCE.md - trap 5.17. */ @media (min-width: 576px) { body .container { max-width: 540px; } } @media (min-width: 768px) { body .container { max-width: 720px; } } @media (min-width: 992px) { body .container { max-width: 960px; } } @media (min-width: 1200px) { body .container { max-width: 1140px; } } @media (min-width: 1400px) { body .container { max-width: 1320px; } }