/** * Breakpoint Configuration * @see https://github.com/Team-Sass/breakpoint/wiki * */ @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .org-default__uw-white--lvl1 { background: #fff; } .org-default__uw-white--primary { background: #fff; } .org-default__uw-black--lvl1 { background: #dfdfdf; } .org-default__uw-black--lvl2 { background: #a2a2a2; } .org-default__uw-black--lvl3 { background: #787878; } .org-default__uw-black--lvl4 { background: #000; } .org-default__uw-black--primary { background: #000; } .org-default__uw-gold--lvl1 { background: #fffaaa; } .org-default__uw-gold--lvl2 { background: #ffea30; } .org-default__uw-gold--lvl3 { background: #fdd54f; } .org-default__uw-gold--lvl4 { background: #e4b429; } .org-default__uw-gold--primary { background: #fdd54f; } .org-ahs--lvl1 { background: #97dfef; } .org-ahs--lvl2 { background: #00bed0; } .org-ahs--lvl3 { background: #0098a5; } .org-ahs--lvl4 { background: #005963; } .org-ahs--primary { background: #005963; } .org-art--lvl1 { background: #ffd5a5; } .org-art--lvl2 { background: #fbaf00; } .org-art--lvl3 { background: #e78100; } .org-art--lvl4 { background: #d93f00; } .org-art--primary { background: #d93f00; } .org-eng--lvl1 { background: #d0b4ef; } .org-eng--lvl2 { background: #be33da; } .org-eng--lvl3 { background: #8100b4; } .org-eng--lvl4 { background: #57058b; } .org-eng--primary { background: #57058b; } .org-env--lvl1 { background: #daf582; } .org-env--lvl2 { background: #bed500; } .org-env--lvl3 { background: #b4be00; } .org-env--lvl4 { background: #607000; } .org-env--primary { background: #607000; } .org-mat--lvl1 { background: #ffbeef; } .org-mat--lvl2 { background: #ff63aa; } .org-mat--lvl3 { background: #df2498; } .org-mat--lvl4 { background: #c60078; } .org-mat--primary { background: #c60078; } .org-sci--lvl1 { background: #b4d5ff; } .org-sci--lvl2 { background: #63a0ff; } .org-sci--lvl3 { background: #0073ce; } .org-sci--lvl4 { background: #0033be; } .org-sci--primary { background: #0033be; } .org-school--lvl1 { background: #ffa5aa; } .org-school--lvl2 { background: #e41740; } .org-school--lvl3 { background: #b71233; } .org-school--lvl4 { background: #80001f; } .org-school--primary { background: #b71233; } /** * This stylesheet is for styles you want to include only when displaying demo * styles for grids, animations, color swatches, etc. * These styles will not be your production CSS. */ .sg-patterns { -webkit-box-sizing: border-box; box-sizing: border-box; max-width: 100%; padding: 0 0.5rem; } .demo-animate { background: #ddd; border-radius: 8px; cursor: pointer; margin-bottom: 1rem; padding: 1rem; text-align: center; } .sg-colors { display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .sg-colors li { border: 1px solid #ddd; border-radius: 0.5rem; -webkit-box-flex: 1; -ms-flex: auto; flex: auto; margin: 0 0.5rem 0.5rem 0; max-width: 14rem; padding: 0.3rem; width: 100%; } .sg-swatch { border-radius: 0.25rem; display: block; height: auto; margin-bottom: 0.25rem; padding: 0.5rem; position: relative; } .sg-sub { font-family: Typ1451-Bold,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif; font-size: 0.88889rem; padding: 0 0.5rem; } .sg-info { padding: 0.25rem 0.125rem 0.25rem 1rem; } .sg-info code { display: block; font-size: 14.22224px; margin-bottom: 0.5rem; } .sg-info h4 { font-family: Typ1451-Bold,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif; font-size: 0.88889rem; margin: 0; padding: 0; } .sg-swatch-colors { background: rgba(255, 255, 255, 0.75); border-radius: 0.25rem; height: auto; padding: 0.75rem; position: relative; width: 50%; } .sg-swatch-hex { display: block; font-family: Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif; font-size: 0.88889rem; margin: 0; padding: 0; } .sg-swatch-name { font-family: Typ1451-Bold,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif; font-size: 1rem; margin: 0; padding: 0; } @font-face { font-family: 'BureauGrotCond Book'; font-style: normal; font-weight: normal; src: url("/fonts/Bureau_Grot-Condensed_Book.eot"), url("/fonts/Bureau_Grot-Condensed_Book.eot?#iefix") format("embedded-opentype"), url("/fonts/Bureau_Grot-Condensed_Book.woff2") format("woff2"), url("/fonts/Bureau_Grot-Condensed_Book.woff") format("woff"), url("/fonts/Bureau_Grot-Condensed_Book.ttf") format("truetype"), url("/fonts/Bureau_Grot-Condensed_Book.svg#Bureau_Grot-Condensed_Book") format("svg"); } @font-face { font-family: 'BureauGrotWide'; font-style: normal; font-weight: 300; src: url("/fonts/Bureau_Grot-Wide_Light.eot"), url("/fonts/Bureau_Grot-Wide_Light.eot?#iefix") format("embedded-opentype"), url("/fonts/Bureau_Grot-Wide_Light.woff2") format("woff2"), url("/fonts/Bureau_Grot-Wide_Light.woff") format("woff"), url("/fonts/Bureau_Grot-Wide_Light.ttf") format("truetype"), url("/fonts/Bureau_Grot-Wide_Light.svg#Bureau_Grot-Wide_Light") format("svg"); } @font-face { font-family: 'BureauGrot Book'; font-style: normal; font-weight: normal; src: url("/fonts/Bureau_Grot-Book.eot"), url("/fonts/Bureau_Grot-Book.eot?#iefix") format("embedded-opentype"), url("/fonts/Bureau_Grot-Book.woff2") format("woff2"), url("/fonts/Bureau_Grot-Book.woff") format("woff"), url("/fonts/Bureau_Grot-Book.ttf") format("truetype"), url("/fonts/Bureau_Grot-Book.svg#Bureau_Grot-Book") format("svg"); } @font-face { font-family: 'BureauGrotCond'; font-style: normal; font-weight: bold; src: url("/fonts/Bureau_Grot-Condensed_Bold.eot"), url("/fonts/Bureau_Grot-Condensed_Bold.eot?#iefix") format("embedded-opentype"), url("/fonts/Bureau_Grot-Condensed_Bold.woff2") format("woff2"), url("/fonts/Bureau_Grot-Condensed_Bold.woff") format("woff"), url("/fonts/Bureau_Grot-Condensed_Bold.ttf") format("truetype"), url("/fonts/Bureau_Grot-Condensed_Bold.svg#Bureau_Grot-Condensed_Bold") format("svg"); } @font-face { font-family: 'BureauGrot'; font-style: normal; font-weight: 300; src: url("/fonts/Bureau_Grot-Light.eot"), url("/fonts/Bureau_Grot-Light.eot?#iefix") format("embedded-opentype"), url("/fonts/Bureau_Grot-Light.woff2") format("woff2"), url("/fonts/Bureau_Grot-Light.woff") format("woff"), url("/fonts/Bureau_Grot-Light.ttf") format("truetype"), url("/fonts/Bureau_Grot-Light.svg#Bureau_Grot-Light") format("svg"); } @font-face { font-family: 'BureauGrotWide Book'; font-style: normal; font-weight: normal; src: url("/fonts/Bureau_Grot-Wide_Book.eot"), url("/fonts/Bureau_Grot-Wide_Book.eot?#iefix") format("embedded-opentype"), url("/fonts/Bureau_Grot-Wide_Book.woff2") format("woff2"), url("/fonts/Bureau_Grot-Wide_Book.woff") format("woff"), url("/fonts/Bureau_Grot-Wide_Book.ttf") format("truetype"), url("/fonts/Bureau_Grot-Wide_Book.svg#Bureau_Grot-Wide_Book") format("svg"); } @font-face { font-family: 'iconic'; font-style: normal; font-weight: normal; src: url("/fonts/iconic.eot"); src: url("/fonts/iconic.eot?#iefix") format("embedded-opentype"), url("../fonts/iconic.svg#iconic") format("svg"), url("/fonts/iconic.woff") format("woff"), url("/fonts/iconic.ttf") format("truetype"); } /* Complete 1451 */ @font-face { font-family: "Typ1451-Regularalternate"; font-style: normal; font-weight: normal; src: url("/fonts/lineto-typ1451-regularalternate.eot"), url("/fonts/lineto-typ1451-regularalternate.eot?#iefix") format("embedded-opentype"), url("/fonts/lineto-typ1451-regularalternate.woff2") format("woff2"), url("/fonts/lineto-typ1451-regularalternate.woff") format("woff"); } @font-face { font-family: "Typ1451-Mediumalternate"; font-style: normal; font-weight: normal; src: url("/fonts/lineto-typ1451-mediumalternate.eot"), url("/fonts/lineto-typ1451-mediumalternate.eot?#iefix") format("embedded-opentype"), url("/fonts/lineto-typ1451-mediumalternate.woff2") format("woff2"), url("/fonts/lineto-typ1451-mediumalternate.woff") format("woff"); } @font-face { font-family: "Typ1451-Regular"; font-style: normal; font-weight: normal; src: url("/fonts/lineto-typ1451-regular.eot"), url("/fonts/lineto-typ1451-regular.eot?#iefix") format("embedded-opentype"), url("/fonts/lineto-typ1451-regular.woff2") format("woff2"), url("/fonts/lineto-typ1451-regular.woff") format("woff"); } @font-face { font-family: "Typ1451-Boldalternate"; font-style: normal; font-weight: normal; src: url("/fonts/lineto-typ1451-boldalternate.eot"), url("/fonts/lineto-typ1451-boldalternate.eot?#iefix") format("embedded-opentype"), url("/fonts/lineto-typ1451-boldalternate.woff2") format("woff2"), url("/fonts/lineto-typ1451-boldalternate.woff") format("woff"); } @font-face { font-family: "Typ1451-Medium"; font-style: normal; font-weight: normal; src: url("/fonts/lineto-typ1451-medium.eot"), url("/fonts/lineto-typ1451-medium.eot?#iefix") format("embedded-opentype"), url("/fonts/lineto-typ1451-medium.woff2") format("woff2"), url("/fonts/lineto-typ1451-medium.woff") format("woff"); } @font-face { font-family: "Typ1451-Bold"; font-style: normal; font-weight: normal; src: url("/fonts/lineto-typ1451-bold.eot"), url("/fonts/lineto-typ1451-bold.eot?#iefix") format("embedded-opentype"), url("/fonts/lineto-typ1451-bold.woff2") format("woff2"), url("/fonts/lineto-typ1451-bold.woff") format("woff"); } @font-face { font-family: "Typ1451-Light"; font-style: normal; font-weight: normal; src: url("/fonts/lineto-typ1451-light.eot"), url("/fonts/lineto-typ1451-light.eot?#iefix") format("embedded-opentype"), url("/fonts/lineto-typ1451-light.woff2") format("woff2"), url("/fonts/lineto-typ1451-light.woff") format("woff"); } @font-face { font-family: "Typ1451-Lightalternate"; font-style: normal; font-weight: normal; src: url("/fonts/lineto-typ1451-lightalternate.eot"), url("/fonts/lineto-typ1451-lightalternate.eot?#iefix") format("embedded-opentype"), url("/fonts/lineto-typ1451-lightalternate.woff2") format("woff2"), url("/fonts/lineto-typ1451-lightalternate.woff") format("woff"); } @font-face { font-family: "fdsu-rwd"; font-style: normal; font-weight: normal; src: url("/fonts/fdsu-rwd.eot"), url("/fonts/fdsu-rwd.eot?#iefix") format("embedded-opentype"), url("/fonts/fdsu-rwd.ttf") format("truetype"), url("/fonts/fdsu-rwd.woff") format("woff"), url("/fonts/fdsu-rwd.svg?#fdsu-rwd") format("svg"); } .breakpoint { background-color: rgba(34, 139, 34, 0.7); color: #fff; display: block; font-family: Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif; font-size: 1rem; padding: 0.6rem; position: fixed; top: 7rem; width: auto; z-index: 9; } .breakpoint::before { content: "no break- Phone up"; } @media (min-width: 30rem) { .breakpoint { background-color: rgba(255, 140, 0, 0.7); } .breakpoint::before { content: "xs"; } } @media (min-width: 40.06rem) { .breakpoint { background-color: rgba(178, 34, 34, 0.7); } .breakpoint::before { content: "small"; } } @media (min-width: 48.06rem) { .breakpoint { background-color: rgba(255, 255, 0, 0.7); color: #000; } .breakpoint::before { content: "medium"; } } @media (min-width: 63.1875rem) { .breakpoint { background-color: rgba(0, 0, 255, 0.7); color: #fff; } .breakpoint::before { content: "large"; } } @media (min-width: 75rem) { .breakpoint { background-color: rgba(95, 158, 160, 0.7); color: #fff; } .breakpoint::before { content: "xl"; } } @media (min-width: 102.5rem) { .breakpoint { background-color: rgba(255, 127, 80, 0.7); color: #fff; } .breakpoint::before { content: "xxl"; } } @media (min-width: 120rem) { .breakpoint { background-color: rgba(127, 255, 212, 0.7); color: #000; } .breakpoint::before { content: "onek - 1K"; } } @media (min-width: 159.93rem) { .breakpoint { background-color: rgba(123, 104, 238, 0.7); } .breakpoint::before { content: "twok - 2K"; } } .layout { margin-left: auto; margin-right: auto; max-width: 75rem; padding: 0 16px; grid-gap: 2rem; } @media (min-width: 75rem) { .layout { padding-left: 0; padding-right: 0; } } .layout.uw-contained-width { margin-left: auto; margin-right: auto; max-width: 75rem; padding: 0 16px; padding: 1rem; } @media (min-width: 75rem) { .layout.uw-contained-width { padding-left: 0; padding-right: 0; } } @media (min-width: 102.5rem) { .layout.uw-contained-width { padding: 1rem 0; } } .layout.uw-contained-width--narrow { /* Match the width of WCMS2's narrow: 496px */ max-width: 31rem; } .layout.uw-contained-width--wide { /* Match the width of WCMS2's wide: 753px */ max-width: 47.0625rem; } .layout.uw-full-width { max-width: 100%; padding: 0 16px; width: 100%; } .uw-section-has-full-width.uw-node__with-sidebar .layout.uw-full-width { padding: 0 16px !important; } .dashboards-container .layout.uw-full-width { max-width: 100%; padding: 0; width: 100%; } .layout.uw-full-width.layout--uw-1-col { overflow: hidden; } .layout.uw-full-width.layout--uw-1-col .block-inline-blockuw-cbl-banner-images, .layout.uw-full-width.layout--uw-1-col .block-inline-blockuw-cbl-image, .layout.uw-full-width.layout--uw-1-col .block-inline-blockuw-cbl-remote-video { left: 50%; margin-left: -50vw; margin-right: -50vw; max-width: 100vw; padding: 0; position: relative; right: 50%; width: 100vw; } .layout.uw-full-width.layout--uw-1-col .block-inline-blockuw-cbl-banner-images h2, .layout.uw-full-width.layout--uw-1-col .block-inline-blockuw-cbl-image h2, .layout.uw-full-width.layout--uw-1-col .block-inline-blockuw-cbl-remote-video h2 { margin-left: 1rem; } .uw-section-has-full-width.uw-node__with-sidebar .layout.uw-full-width.layout--uw-1-col .block-inline-blockuw-cbl-banner-images, .uw-section-has-full-width.uw-node__with-sidebar .layout.uw-full-width.layout--uw-1-col .block-inline-blockuw-cbl-image, .uw-section-has-full-width.uw-node__with-sidebar .layout.uw-full-width.layout--uw-1-col .block-inline-blockuw-cbl-remote-video { left: 0; margin-left: -1rem; margin-right: -1rem; max-width: 100%; padding: 0; position: relative; right: 0; width: 100%; } @media (min-width: 48.06rem) { .layout.uw-full-width.layout--uw-1-col .block-inline-blockuw-cbl-google-maps { left: 50%; margin-left: -50vw; margin-right: -50vw; max-width: 100vw; padding: 0; position: relative; right: 50%; width: 100vw; } } .uw-section-has-full-width.uw-node__with-sidebar .layout.uw-full-width.layout--uw-1-col .block-inline-blockuw-cbl-google-maps { left: 0; margin-left: -1rem; margin-right: -1rem; max-width: 100%; padding: 0; position: relative; right: 0; width: 100%; } .layout.uw-full-width.layout--uw-1-col .block-inline-blockuw-cbl-google-maps h2 { margin-left: 1rem; } .uw-node__with-sidebar .layout { margin: inherit; } @media (min-width: 48.06rem) { .uw-node__with-sidebar .layout { margin-left: auto; margin-right: auto; max-width: 75rem; padding: 0 16px; } } @media (min-width: 48.06rem) and (min-width: 75rem) { .uw-node__with-sidebar .layout { padding-left: 0; padding-right: 0; } } .uw-node__with-sidebar .layout.uw-contained-width { margin-left: auto; margin-right: auto; max-width: 75rem; padding: 0 16px; margin: inherit; padding: 1rem; } @media (min-width: 75rem) { .uw-node__with-sidebar .layout.uw-contained-width { padding-left: 0; padding-right: 0; } } @media (min-width: 102.5rem) { .uw-node__with-sidebar .layout.uw-contained-width { padding: 1rem 0; } } .uw-node__with-sidebar .layout.uw-contained-width--narrow { /* Match the width of WCMS2's narrow: 496px */ margin: inherit; } .uw-node__with-sidebar .layout.uw-contained-width--wide { /* Match the width of WCMS2's wide: 753px */ margin: inherit; } .layout__region { margin-bottom: 2rem; } .layout--uw-1-col { display: grid; grid-template-columns: 100%; } .layout--uw-1-col .layout__region--first { grid-column: 1 / 2; } .layout--uw-2-col { display: grid; grid-gap: 2rem; grid-template-columns: 100%; } @media (min-width: 63.1875rem) { .layout--uw-2-col.larger-left { grid-template-columns: 2fr 1fr; } } @media (min-width: 63.1875rem) { .layout--uw-2-col.larger-right { grid-template-columns: 1fr 2fr; } } .layout--uw-2-col.even-split { grid-template-columns: 100%; } @media (min-width: 63.1875rem) { .layout--uw-2-col.even-split { grid-template-columns: 1fr 1fr; } } .layout--uw-2-col .layout__region--first { grid-column: 1 / 2; grid-row: 1 / 2; } .layout--uw-2-col .layout__region--second { grid-column: 1 / 2; grid-row: 2/ 3; } @media (min-width: 63.1875rem) { .layout--uw-2-col .layout__region--second { grid-column: 2 / 3; grid-row: 1 / 2; } } .layout--uw-3-col { display: grid; grid-gap: 2rem; } .layout--uw-3-col.even-split { grid-template-columns: 100%; } @media (min-width: 48.06rem) { .layout--uw-3-col.even-split { grid-template-columns: repeat(3, 1fr); } } .layout--uw-3-col.larger-left { grid-template-columns: 100%; } @media (min-width: 48.06rem) { .layout--uw-3-col.larger-left { grid-template-columns: 2fr 1fr 1fr; } } .layout--uw-3-col.larger-middle { grid-template-columns: 100%; } @media (min-width: 48.06rem) { .layout--uw-3-col.larger-middle { grid-template-columns: 1fr 2fr 1fr; } } .layout--uw-3-col.larger-right { grid-template-columns: 100%; } @media (min-width: 48.06rem) { .layout--uw-3-col.larger-right { grid-template-columns: 1fr 1fr 2fr; } } .layout--uw-3-col.legacy-38-38-24 { grid-template-columns: 100%; } @media (min-width: 48.06rem) { .layout--uw-3-col.legacy-38-38-24 { grid-template-columns: 38% 38% 24%; } } .layout--uw-3-col.legacy-24-38-38 { grid-template-columns: 100%; } @media (min-width: 48.06rem) { .layout--uw-3-col.legacy-24-38-38 { grid-template-columns: 24% 38% 38%; } } .layout--uw-3-col .layout__region--first { grid-column: 1 / 2; grid-row: 1 / 2; } .layout--uw-3-col .layout__region--second { grid-column: 1 / 2; grid-row: 2 / 3; } @media (min-width: 48.06rem) { .layout--uw-3-col .layout__region--second { grid-column: 2 / 3; grid-row: 1 / 2; } } .layout--uw-3-col .layout__region--third { grid-column: 1 / 2; grid-row: 3 / 4; } @media (min-width: 48.06rem) { .layout--uw-3-col .layout__region--third { grid-column: 3 / 4; grid-row: 1 / 2; } } .layout--uw-4-col { display: grid; grid-gap: 2rem; grid-template-columns: 100%; } @media (min-width: 48.06rem) { .layout--uw-4-col.even-split { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 48.06rem) { .layout--uw-4-col.larger-left { grid-template-columns: 3fr repeat(3, 1fr); } } @media (min-width: 48.06rem) { .layout--uw-4-col.larger-second { grid-template-columns: 1fr 3fr repeat(2, 1fr); } } @media (min-width: 48.06rem) { .layout--uw-4-col.larger-third { grid-template-columns: repeat(2, 1fr) 3fr 1fr; } } @media (min-width: 48.06rem) { .layout--uw-4-col.larger-right { grid-template-columns: repeat(3, 1fr) 3fr; } } @media (min-width: 48.06rem) { .layout--uw-4-col.legacy-23-27-27-23 { grid-template-columns: 0.8fr repeat(2, 1.1fr) 0.8fr; } } .layout--uw-4-col .layout__region--first { grid-column: 1 / 2; grid-row: 1 / 2; } .layout--uw-4-col .layout__region--second { grid-column: 1 / 2; grid-row: 2 / 3; } @media (min-width: 48.06rem) { .layout--uw-4-col .layout__region--second { grid-column: 2 / 3; grid-row: 1 / 2; } } .layout--uw-4-col .layout__region--third { grid-column: 1 / 2; grid-row: 3 / 4; } @media (min-width: 48.06rem) { .layout--uw-4-col .layout__region--third { grid-column: 3 / 4; grid-row: 1 / 2; } } .layout--uw-4-col .layout__region--fourth { grid-column: 1 / 2; grid-row: 4 / 5; } @media (min-width: 48.06rem) { .layout--uw-4-col .layout__region--fourth { grid-column: 4 / 5; grid-row: 1 / 2; } } .layout--uw-5-col { display: grid; grid-gap: 2rem; grid-template-columns: 100%; } @media (min-width: 48.06rem) { .layout--uw-5-col.even-split { grid-template-columns: repeat(5, 1fr); } } @media (min-width: 48.06rem) { .layout--uw-5-col.larger-left { grid-template-columns: 3fr 1fr 1fr 1fr 1fr; } } @media (min-width: 48.06rem) { .layout--uw-5-col.larger-second { grid-template-columns: 1fr 3fr 1fr 1fr 1fr; } } @media (min-width: 48.06rem) { .layout--uw-5-col.larger-third { grid-template-columns: 1fr 1fr 3fr 1fr 1fr; } } @media (min-width: 48.06rem) { .layout--uw-5-col.larger-fourth { grid-template-columns: 1fr 1fr 1fr 3fr 1fr; } } @media (min-width: 48.06rem) { .layout--uw-5-col.larger-right { grid-template-columns: 1fr 1fr 1fr 1fr 3fr; } } @media (min-width: 48.06rem) { .layout--uw-5-col.legacy-23-19-19-19-20 { grid-template-columns: 23% 19% 19% 19% 20%; } } .layout--uw-5-col .layout__region--first { grid-column: 1 / 2; grid-row: 1 / 2; } .layout--uw-5-col .layout__region--second { grid-column: 1 / 2; grid-row: 2 / 3; } @media (min-width: 48.06rem) { .layout--uw-5-col .layout__region--second { grid-column: 2 / 3; grid-row: 1 / 2; } } .layout--uw-5-col .layout__region--third { grid-column: 1 / 2; grid-row: 3 / 4; } @media (min-width: 48.06rem) { .layout--uw-5-col .layout__region--third { grid-column: 3 / 4; grid-row: 1 / 2; } } .layout--uw-5-col .layout__region--fourth { grid-column: 1 / 2; grid-row: 4 / 5; } @media (min-width: 48.06rem) { .layout--uw-5-col .layout__region--fourth { grid-column: 4 / 5; grid-row: 1 / 2; } } .layout--uw-5-col .layout__region--fifth { grid-column: 1 / 2; grid-row: 5 / 6; } @media (min-width: 48.06rem) { .layout--uw-5-col .layout__region--fifth { grid-column: 5 / 6; grid-row: 1 / 2; } } .layout--uw-inverted-l-left { display: grid; gap: 2rem; grid-template-columns: 100%; } @media (min-width: 63.1875rem) { .layout--uw-inverted-l-left.even-split { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 63.1875rem) { .layout--uw-inverted-l-left.larger-left { grid-template-columns: 2fr 1fr; } } @media (min-width: 63.1875rem) { .layout--uw-inverted-l-left.larger-right { grid-template-columns: 1fr 2fr; } } .layout--uw-inverted-l-left .uw-inverted-l--left-side { grid-column: 1 / 2; grid-row: 1 / 2; } .layout--uw-inverted-l-left .uw-inverted-l--right-side { display: grid; gap: 2rem; grid-column: 1 / 2; grid-row: 2 / 3; grid-template-columns: 100%; } @media (min-width: 63.1875rem) { .layout--uw-inverted-l-left .uw-inverted-l--right-side { grid-column: 2 / 3; grid-row: 1 / 2; grid-template-columns: 1fr 1fr; } } .layout--uw-inverted-l-left .layout__region--second { grid-column: 1 / 2; grid-row: 1 / 2; } .layout--uw-inverted-l-left .layout__region--third { grid-column: 2 / 3; grid-row: 1 / 2; } .layout--uw-inverted-l-left .layout__region--fourth { grid-column: 1 / 3; grid-row: 2 / 3; } .layout--uw-inverted-l-right { display: grid; gap: 2rem; grid-template-columns: 100%; } @media (min-width: 63.1875rem) { .layout--uw-inverted-l-right.even-split { grid-template-columns: 1fr 1fr; } } @media (min-width: 63.1875rem) { .layout--uw-inverted-l-right.larger-left { grid-template-columns: 2fr 1fr; } } @media (min-width: 63.1875rem) { .layout--uw-inverted-l-right.larger-right { grid-template-columns: 1fr 2fr; } } .layout--uw-inverted-l-right .uw-inverted-l--left-side { display: grid; gap: 2rem; grid-column: 1 / 2; grid-row: 1 / 2; grid-template-columns: 100%; } @media (min-width: 63.1875rem) { .layout--uw-inverted-l-right .uw-inverted-l--left-side { grid-template-columns: repeat(2, 1fr); } } .layout--uw-inverted-l-right .uw-inverted-l--right-side { grid-column: 1 / 2; grid-row: 2 / 3; } @media (min-width: 63.1875rem) { .layout--uw-inverted-l-right .uw-inverted-l--right-side { grid-column: 2 / 3; grid-row: 1 / 2; } } .layout--uw-inverted-l-right .layout__region--first { grid-column: 1 / 2; grid-row: 1 / 2; } .layout--uw-inverted-l-right .layout__region--second { grid-column: 2 / 3; grid-row: 1 / 2; } .layout--uw-inverted-l-right .layout__region--third { grid-column: 1 / 3; grid-row: 2 / 3; } .layout-builder .layout__region { outline: 2px dashed #2f91da; } .pattern-lab-content .layout__region { outline: 2px dashed #2f91da; padding: 1.5rem; text-align: center; } .pattern-lab-content .layout__region .pl-labels { text-align: center; } .pl-layout-h2 { margin-left: auto; margin-right: auto; max-width: 75rem; padding: 0 16px; } @media (min-width: 75rem) { .pl-layout-h2 { padding-left: 0; padding-right: 0; } }