diff --git a/core/themes/olivero/css/components/wide-image.css b/core/themes/olivero/css/components/wide-image.css index 868a0ad1..04dac691 100644 --- a/core/themes/olivero/css/components/wide-image.css +++ b/core/themes/olivero/css/components/wide-image.css @@ -42,7 +42,7 @@ } .wide-image { - width: calc(100vw - 2.25rem); + width: auto; margin-top: 2.25rem; margin-bottom: 4.5rem } @@ -59,7 +59,7 @@ } .wide-image { - width: calc(85.71429vw - 3.05357rem) + width: auto } } @@ -74,7 +74,7 @@ } .wide-image { - width: calc(85.71429vw - 9.80357rem) + width: auto } } @@ -89,7 +89,7 @@ } .wide-image { - width: 68.14286rem + width: auto } } @@ -98,28 +98,28 @@ @media (min-width: 62.5rem) { .sidebar-grid .wide-image { - width: calc(64.28571vw - 2.85268rem) + width: auto } } @media (min-width: 75rem) { .sidebar-grid .wide-image { - width: calc(64.28571vw - 7.91518rem) + width: auto } } @media (min-width: 81.25rem) { .sidebar-grid .wide-image { - width: calc(71.42857vw - 8.54464rem) + width: auto } } @media (min-width: 90rem) { .sidebar-grid .wide-image { - width: 56.41071rem + width: auto } } diff --git a/core/themes/olivero/css/components/wide-image.pcss.css b/core/themes/olivero/css/components/wide-image.pcss.css index bcd2df23..bbce3d32 100644 --- a/core/themes/olivero/css/components/wide-image.pcss.css +++ b/core/themes/olivero/css/components/wide-image.pcss.css @@ -12,23 +12,23 @@ margin-inline-end: 0; @media (--grid-md) { - width: calc(14 * var(--grid-col-width--md) + 13 * var(--grid-gap--md)); + width: auto; 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)); + width: auto; 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)); + width: auto; 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)); + width: auto; margin-inline-start: calc(-1 * (var(--grid-col-width--max) + var(--grid-gap--max))); } } @@ -36,19 +36,19 @@ /* 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)); + width: auto; } @media (--nav) { - width: calc(9 * var(--grid-col-width--nav) + 8 * var(--grid-gap--nav)); + width: auto; } @media (--xl) { - width: calc(10 * var(--grid-col-width--nav) + 9 * var(--grid-gap--nav)); + width: auto; } @media (--grid-max) { - width: calc(10 * var(--grid-col-width--max) + 9 * var(--grid-gap--max)); + width: auto; } }