diff --git a/css/styles.css b/css/styles.css index fdf3b6c26172b82e3ba17690cc03e15f4b9b1afa..0fe8652f0064692337302ff962093e7e336769f7 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1893,37 +1893,15 @@ svg:not(:root) { @media (min-width: 80rem) { .layout.uw-contained-width { padding: 1rem 0; } } + .layout.uw-contained-width--narrow { + max-width: 496px; } + .layout.uw-contained-width--wide { + max-width: 753px; } .layout.uw-full-width { max-width: 100%; padding: 0; width: 100%; } -.layout.uw-contained-width { - margin-left: auto; - margin-right: auto; - max-width: 63.1875rem; - padding: 0 16px; } - @media (min-width: 80rem) { - .layout.uw-contained-width { - padding-left: 0; - padding-right: 0; } } - -.layout--uwtwocol { - display: grid; } - .layout--uwtwocol .layout__region--first { - grid-column: 1 / 2; } - .layout--uwtwocol .layout__region--second { - grid-column: 2 / 3; } - -.layout--uwtwocol.larger-left { - grid-template-columns: 67% 33%; } - -.layout--uwtwocol.larger-right { - grid-template-columns: 33% 67%; } - -.layout--uwtwocol.even-split { - grid-template-columns: 50% 50%; } - .l-media { display: flex; flex-direction: column; } diff --git a/source/_patterns/03-layouts/layout/_layout.scss b/source/_patterns/03-layouts/layout/_layout.scss index 12c9ee194b8f54414cce7b55158c8b2ba7f1970a..42f75f6c11bf79c686bb6c36f2dee5034d018dc7 100644 --- a/source/_patterns/03-layouts/layout/_layout.scss +++ b/source/_patterns/03-layouts/layout/_layout.scss @@ -7,6 +7,12 @@ @include xl { padding:rem(gesso-spacing(sm)) 0; } + &--narrow { + max-width: 496px; + } + &--wide { + max-width: 753px; + } } &.uw-full-width {