/*------------------------------ LAYOUTS ------- We support two different page layouts and three layout modes. Layouts: - One column - Two column Modes: - ``: fixed one column layout - ``: fixed two column layout - ``: layout is determined by the page type - ``: two column layout - ``: one column layout ------------------------------*/ /* Shared */ .layout { padding: 3rem 0; display: grid; gap: 40px; } .layout__col-2 { position: relative; } @media screen and (max-width: 770px) { .layout { padding: 2rem 0; } } /* 1 column (either explicitly set or dynamically set for inquiry page type, or enforced if JavaScript is disabled) */ [data-layout="one-col"] .layout, [data-layout="dynamic"][data-page-type="inquiry"] .layout, body:has(.no-js) .layout { grid-template-columns: 1fr; } [data-layout="one-col"] .layout__col-1, [data-layout="dynamic"][data-page-type="inquiry"] .layout__col-1, body:has(.no-js) .layout__col-1 { display: none; } [data-layout="one-col"] .container, [data-layout="dynamic"][data-page-type="inquiry"] .container, body:has(.no-js) .container { max-width: 900px; } /* 2 column (either explicitly set or dynamically set as the fallback for non-inquiry pages) */ @media screen and (min-width: 980px) { [data-layout="two-col"] .layout, [data-layout="dynamic"]:not([data-page-type="inquiry"]) .layout { grid-template-columns: 1fr 600px; gap: 60px; } [data-layout="two-col"] .layout__col-2, [data-layout="dynamic"]:not([data-page-type="inquiry"]) .layout__col-2 { margin-top: -5rem; } } /*------------------------------ DYNAMIC DISPLAY ---------------- You can use the following classes to hide/display elements based on the page type. - ``: only on 'default' page type - ``: only on 'inquiry' page type ------------------------------*/ body[data-page-type="inquiry"] .pt\:default { display: none !important; } body:not([data-page-type="inquiry"]) .pt\:inquiry { display: none !important; }