/** * @file * Wide image component. */ @import "../base/variables.pcss.css"; .wide-image { margin-block-start: var(--sp0-5); margin-block-end: var(--sp2); margin-inline-start: 0; margin-inline-end: 0; @media (--grid-md) { width: calc(14 * var(--grid-col-width--md) + 13 * var(--grid-gap--md)); margin-block: var(--sp2) var(--sp4); margin-inline-start: calc(-1 * ((var(--grid-col-width--md) + var(--grid-gap--md)))); } @media (--lg) { width: calc(12 * var(--grid-col-width--lg) + 11 * var(--grid-gap--lg)); margin-inline-start: calc(-1 * (var(--grid-col-width--lg) + var(--grid-gap--lg))); } @media (--nav) { width: calc(12 * var(--grid-col-width--nav) + 11 * var(--grid-gap--nav)); margin-inline-start: calc(-1 * (var(--grid-col-width--nav) + var(--grid-gap--nav))); } @media (--grid-max) { width: calc(12 * var(--grid-col-width--max) + 11 * var(--grid-gap--max)); margin-inline-start: calc(-1 * (var(--grid-col-width--max) + var(--grid-gap--max))); } } /* Ensure that image doesn't overlap sidebar. */ .sidebar-grid .wide-image { @media (--lg) { width: calc(9 * var(--grid-col-width--lg) + 8 * var(--grid-gap--lg)); } @media (--nav) { width: calc(9 * var(--grid-col-width--nav) + 8 * var(--grid-gap--nav)); } @media (--xl) { width: calc(10 * var(--grid-col-width--nav) + 9 * var(--grid-gap--nav)); } @media (--grid-max) { width: calc(10 * var(--grid-col-width--max) + 9 * var(--grid-gap--max)); } } /* Ensure that image doesn't overlap layout builder sections when editing layouts. */ .layout-builder .wide-image { max-width: 100%; margin-inline-start: 0; margin-inline-end: 0; }