/* ========================================================================== Section: blog-list Figma frame "Blog" (218:358), band y 767..2225. Measured anchors, reproduced exactly at 1440: h2 x = 143, y = 915, 56 / 56, #1b1d36, "Wissenshub" gradient intro x = 143, y = 1014, two paragraphs, 17 / 19 light cards x = 142 / 538 / 934, rows at y = 1125 and 1679, 365 x 489, radius 15, white at 0.8, --shadow-card photo 365 x 244, top corners rounded, sitting 9px above the card title +26 inside, y = 1394, 26 / 24 dark-navy, 313 wide excerpt +26 inside, y = 1456, 272 wide, 17 / 19 light more link +26 inside, y = 1571, 17 / 19, brand gradient ornaments left box x = -191, y = 1039, 956.248 x 909.471, inner 717.398 x 786.324 rotated 106.32deg right box x = 864, y = 1689, 737.436 x 871.456, inner 839.688 x 698.931 rotated -87.32deg The photo overhangs the card's top by 9px in the design (1116 against 1125), which is why it is positioned rather than simply stacked. Every card carries identical copy: it is placeholder standing in for six real posts. Reproduced verbatim and flagged in section.json. ========================================================================== */ .blog-list { position: relative; /* No background: both ornaments overhang neighbouring sections, and a white fill here would slice them. See CONVENTIONS section 3. */ padding-block: 148px 57px; padding-inline: calc(var(--stage-x) + clamp(1.25rem, 9.8611vw, 142px)) calc(var(--stage-x) + clamp(1.25rem, 9.7917vw, 141px)); } .blog-list__title, .blog-list__intro, .blog-list__grid { position: relative; z-index: 1; } .blog-list__title { /* Heading and intro sit 1px inside the card grid's left edge (143 vs 142). */ margin-inline-start: 1px; max-inline-size: 881px; color: var(--color-heading-alt); } .blog-list__intro { margin-block-start: 43px; /* h2 closes at 971, intro opens at 1014 */ margin-inline-start: 1px; } .blog-list__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 365px)); /* Card left edges 142 / 538 / 934 give a uniform 31px gutter; rows open at 1125 and 1679, so 65px between them. */ column-gap: 31px; row-gap: 65px; /* Intro closes at 1052 (two lines of 19), cards open at 1125. */ margin-block-start: 73px; } /* Note: .blog-list__post deliberately has no padding for the photo's 9px overhang. The photo is offset out of the card and simply overflows; reserving space here as well would count the overhang twice and add 9px to every row. */ .blog-list__link { position: relative; display: block; block-size: 489px; /* Card opens at 1125, its title at 1394. */ padding: 269px 26px 0; border-radius: var(--radius-md); background-color: rgb(255 255 255 / 0.8); box-shadow: var(--shadow-card); color: inherit; text-decoration: none; } .blog-list__photo { position: absolute; /* Figma wraps this in scaleY(-1) + rotate(180deg), which nets to a horizontal flip. Dropping it mirrors the photo. */ scale: -1 1; inset-block-start: -9px; inset-inline: 0; inline-size: 100%; block-size: 244px; border-start-start-radius: var(--radius-md); border-start-end-radius: var(--radius-md); object-fit: cover; } .blog-list__post-title { color: var(--color-surface-dark); max-inline-size: 313px; } .blog-list__excerpt { margin-block-start: 14px; /* title closes at 1442, excerpt opens at 1456 */ max-inline-size: 272px; } .blog-list__more { display: inline-block; /* Excerpt closes at 1532 (four lines), the link opens at 1571. */ margin-block-start: 39px; font-size: var(--text-sm); line-height: var(--leading-body); } .blog-list__link:hover .blog-list__more, .blog-list__link:focus-visible .blog-list__more { text-decoration: underline; text-underline-offset: 0.2em; } /* --- ornaments -------------------------------------------------------- */ .blog-list__ornament { position: absolute; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 0; } .blog-list__ornament[data-side="left"] { /* Enters from off-canvas, so it stays on the viewport edge rather than the centred stage. */ inset-block-start: 272px; /* 1039 - 767 */ inset-inline-start: -191px; inline-size: 956.248px; aspect-ratio: 956.248 / 909.471; } .blog-list__ornament[data-side="right"] { inset-block-start: 922px; /* 1689 - 767 */ inset-inline-start: calc(var(--stage-x) + 864px); inline-size: 737.436px; aspect-ratio: 737.436 / 871.456; } .blog-list__ornament-frame { flex: none; display: block; overflow: hidden; } .blog-list__ornament[data-side="left"] .blog-list__ornament-frame { inline-size: 75.022%; /* 717.398 / 956.248 */ aspect-ratio: 717.398 / 786.324; rotate: 106.32deg; } .blog-list__ornament[data-side="right"] .blog-list__ornament-frame { inline-size: 113.865%; /* 839.688 / 737.436 */ aspect-ratio: 839.688 / 698.931; rotate: -87.32deg; } .blog-list__ornament-frame img { max-inline-size: none; object-fit: cover; } .blog-list__ornament[data-side="left"] .blog-list__ornament-frame img { inline-size: 129.3%; block-size: 117.96%; } .blog-list__ornament[data-side="right"] .blog-list__ornament-frame img { inline-size: 100%; block-size: 120.14%; } /* ------------------------------------------------------------------ Below 1440 there is no comp. Decisions taken here: - three columns to two at 64rem, then one at 40rem - the card's fixed 489px height is released so a real excerpt can wrap without overflowing, and the photo returns to the flow - both ornaments are dropped below 64rem: their placement is a function of the 1440 composition and they land on the cards ------------------------------------------------------------------ */ @media (width < 64rem) { .blog-list { padding-block: 96px 64px; } .blog-list__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .blog-list__link { block-size: auto; padding-block: 0 26px; display: flex; flex-direction: column; } .blog-list__photo { position: static; display: block; margin-block-end: 34px; margin-inline: -26px; inline-size: calc(100% + 52px); } .blog-list__ornament { display: none; } } @media (width < 40rem) { .blog-list__grid { grid-template-columns: minmax(0, 1fr); } }