diff --git a/core/themes/olivero/css/components/node-teaser.css b/core/themes/olivero/css/components/node-teaser.css index 04fe2a50b352a415b7a1cbec0e6d64576eda38a4..09b63b683fb6eb338f779b77a0584ceb532fb83d 100644 --- a/core/themes/olivero/css/components/node-teaser.css +++ b/core/themes/olivero/css/components/node-teaser.css @@ -36,16 +36,15 @@ .node--view-mode-teaser .node__top-wrapper { display: flex; + flex-wrap: wrap; align-items: center; - margin: 0; - margin-bottom: 1.125rem + margin: 0 } @media (min-width: 62.5rem) { .node--view-mode-teaser .node__top-wrapper { - position: relative; /* Anchor the image */ - margin: 0 + position: relative /* Anchor the image */ } } @@ -59,9 +58,23 @@ .node--view-mode-teaser .primary-image { flex-shrink: 0; - margin: 0 + margin: 0; + margin-bottom: 1.125rem + + /* Ensure title does not wrap under image until necessary. */ } +.node--view-mode-teaser .primary-image + .node__title { + flex-basis: calc(100% - 5.0625rem) + } + +@media (min-width: 62.5rem) { + +.node--view-mode-teaser .primary-image + .node__title { + flex-basis: auto + } + } + .node--view-mode-teaser .primary-image a { display: block; } @@ -138,6 +151,7 @@ .node--view-mode-teaser .node__title { margin: 0; + margin-bottom: 1.125rem; color: #0d1214; font-size: 1.5rem; line-height: 1.6875rem @@ -146,7 +160,6 @@ @media (min-width: 62.5rem) { .node--view-mode-teaser .node__title { - margin-bottom: 1.125rem; font-size: 2.25rem; line-height: 3.375rem } diff --git a/core/themes/olivero/css/components/node-teaser.pcss.css b/core/themes/olivero/css/components/node-teaser.pcss.css index 29ec28bbca10d709086d3f9f64b9a1eccd10b34b..82335fa89a44f8d7c2a09169af6acd78ca8b8e7b 100644 --- a/core/themes/olivero/css/components/node-teaser.pcss.css +++ b/core/themes/olivero/css/components/node-teaser.pcss.css @@ -30,21 +30,30 @@ & .node__top-wrapper { display: flex; + flex-wrap: wrap; align-items: center; margin: 0; - margin-block-end: var(--sp1); @media (--lg) { position: relative; /* Anchor the image */ - margin: 0; } } & .primary-image { flex-shrink: 0; margin: 0; + margin-block-end: var(--sp1); margin-inline-end: var(--sp1); + /* Ensure title does not wrap under image until necessary. */ + & + .node__title { + flex-basis: calc(100% - calc(4.5 * var(--sp))); + + @media (--lg) { + flex-basis: auto; + } + } + & a { display: block; } @@ -89,12 +98,12 @@ & .node__title { margin: 0; + margin-block-end: var(--sp1); color: var(--color--gray-0); font-size: 24px; line-height: var(--line-height-base); @media (--lg) { - margin-block-end: var(--sp1); font-size: var(--sp2); line-height: var(--sp3); }