Dies ist ein CSS-Stylesheet, das die Schriftfamilie „Guardian Headline Full" für die Verwendung auf einer Website definiert. Es enthält mehrere @font-face-Regeln, die jeweils ein anderes Gewicht (Light, Regular, Medium, Semibold) und einen anderen Stil (normal oder kursiv) der Schrift festlegen. Für jede Variation stellt die Regel die Schriftdateien in verschiedenen Formaten bereit – WOFF2, WOFF und TTF –, damit Browser das kompatibelste auswählen können. Die Schriftdateien werden auf dem Asset-Server des Guardian gehostet, und die Regeln stellen sicher, dass die Schrift korrekt angewendet wird, wenn die Seite geladen wird.
Dies ist ein Block mit CSS-Code, der Schriftstile für eine Website definiert. Er richtet verschiedene Schriftfamilien, Gewichte und Stile für die Typografie des Guardian ein. Der Code enthält @font-face-Regeln für „Guardian Headline Full" und „Guardian Titlepiece", die verschiedene Schriftdateien (wie WOFF2-, WOFF- und TTF-Formate) und deren entsprechende Gewichte (wie fett, kursiv, schwarz, leicht und normal) festlegen. Diese Regeln stellen sicher, dass die Schriften in verschiedenen Browsern und Geräten korrekt geladen werden.
Hier ist der Text in fließendem, natürlichem Englisch neu geschrieben:
Dies ist eine Reihe von @font-face-Regeln für die Schriftfamilie „Guardian Headline Full". Jede Regel definiert einen anderen Stil und ein anderes Gewicht der Schrift und verweist auf denselben Satz von Dateien, jedoch mit unterschiedlichen Namen. Die Dateien werden auf dem Assets-Server des Guardian gehostet.
Die Regeln decken die folgenden Stile ab:
- Regular (Gewicht 400) in normalen und kursiven Stilen
- Medium (Gewicht 500) in normalen und kursiven Stilen
- Semibold (Gewicht 600) in normalen und kursiven Stilen
- Bold (Gewicht 700) in normalen und kursiven Stilen
- Black (Gewicht 900) in normalen und kursiven Stilen
Für jeden Stil werden die Schriftdateien in drei Formaten bereitgestellt: WOFF2, WOFF und TTF. Der Browser verwendet das erste Format, das er unterstützt, in dieser Reihenfolge.ine-BlackItalic.ttf) format("truetype");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: Guardian Titlepiece;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.ttf) format("truetype");
font-weight: 700;
font-style: normal;
}
#article-body > div .content--interactive-grid,
.content--interactive > div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name="body"] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-column-gap: 0px;
grid-template-columns: 100%;
grid-template-areas:
"media"
"title"
"headline"
"standfirst"
"lines"
"meta"
"body";
}
@media (min-width: 30em) {
#article-body > div .content--interactive-grid figure.element--immersive figcaption,
.content--interactive > div .content--interactive-grid figure.element--immersive figcaption,
#comment-body .content--interactive-grid figure.element--immersive figcaption,
[data-gu-name="body"] .content--interactive-grid figure.element--immersive figcaption,
#feature-body .content--interactive-grid figure.element--immersive figcaption {
padding: 0 20px;
max-width: 620px;
}
}
@media (min-width: 46.25em) {
#article-body > div .content--interactive-grid,
.content--interactive > div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name="body"] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 100%;
grid-column-gap: 10px;
grid-template-areas:
"title"
"headline"
"standfirst"
"media"
"lines"
"meta"
"body";
}
#article-body > div .content--interactive-grid #maincontent,
.content--interactive > div .content--interactive-grid #maincontent,
#comment-body .content--interactive-grid #maincontent,
[data-gu-name="body"] .content--interactive-grid #maincontent,
#feature-body .content--interactive-grid #maincontent {
padding-right: 80px;
}
}
@media (min-width: 61.25em) {
#article-body > div .content--interactive-grid,
.content--interactive > div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name="body"] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 620px 300px;
grid-template-areas:
"title right-column"
"headline right-column"
"standfirst right-column"
"media right-column"
"lines right-column"
"meta right-column"
"body right-column"
". right-column";
}
#article-body > div .content--interactive-grid #maincontent,
.content--interactive > div .content--interactive-grid #maincontent,
#comment-body .content--interactive-grid #maincontent,
[data-gu-name="body"] .content--interactive-grid #maincontent,
#feature-body .content--interactive-grid #maincontent {
padding-right: unset;
}
}
@media (min-width: 71.25em) {
#article-body > div .content--interactive-grid,
.content--interactive > div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name="body"] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 140px 1px 620px 300px;
grid-template-areas:
"title border headline right-column"
". border standfirst right-column"
". border media right-column"
". border body right-column"
". border . right-column";
}
#article-body > div .content--interactive-grid .content__standfirst,
.content--interactive > div .content--interactive-grid .content__standfirst,
#comment-body .content--interactive-grid .content__standfirst,
[data-gu-name="body"] .content--interactive-grid .content__standfirst,
#feature-body .content--interactive-grid .content__standfirst {
padding-bottom: 0;
}
#article-body > div .content--interactive-grid figure.element--immersive figcaption,
.content--interactive > div .content--interactive-grid figure.element--immersive figcaption,
#comment-body .content--interactive-grid figure.element--immersive figcaption,
[data-gu-name="body"] .content--interactive-grid figure.element--immersive figcaption,
#feature-body .content--interactive-grid figure.element--immersive figcaption {
/ Hier sind keine zusätzlichen Stile angegeben /
}
}ent--immersive figcaption{padding:4px 0 0}#article-body>div .content--interactive-grid [data-gu-name=lines],#article-body>div .content--interactive-grid [data-gu-name=meta],.content--interactive>div .content--interactive-grid [data-gu-name=lines],.content--interactive>div .content--interactive-grid [data-gu-name=meta],#comment-body .content--interactive-grid [data-gu-name=lines],#comment-body .content--interactive-grid [data-gu-name=meta],[data-gu-name=body] .content--interactive-grid [data-gu-name=lines],[data-gu-name=body] .content--interactive-grid [data-gu-name=meta],#feature-body .content--interactive-grid [data-gu-name=lines],#feature-body .content--interactive-grid [data-gu-name=meta]{grid-area:2/1/5/2}#article-body>div .content--interactive-grid [data-gu-name=lines],.content--interactive>div .content--interactive-grid [data-gu-name=lines],#comment-body .content--interactive-grid [data-gu-name=lines],[data-gu-name=body] .content--interactive-grid [data-gu-name=lines],#feature-body .content--interactive-grid [data-gu-name=lines]{height:-moz-max-content;height:max-content;margin-top:5px}#article-body>div .content--interactive-grid [data-gu-name=meta],.content--interactive>div .content--interactive-grid [data-gu-name=meta],#comment-body .content--interactive-grid [data-gu-name=meta],[data-gu-name=body] .content--interactive-grid [data-gu-name=meta],#feature-body .content--interactive-grid [data-gu-name=meta]{margin-top:18px}}@media (min-width: 81.25em){#article-body>div .content--interactive-grid,.content--interactive>div .content--interactive-grid,#comment-body .content--interactive-grid,[data-gu-name=body] .content--interactive-grid,#feature-body .content--interactive-grid{grid-template-columns:219px 1px 620px 80px 300px}}body.ios .article__header .standfirst__inner p,body.android .article__header .standfirst__inner p{font-family:Guardian Headline,Guardian Egyptian Web,Guardian Headline Full,Georgia,serif;font-weight:500}body.ios .article__header .article-kicker__section,body.android .article__header .article-kicker__section{display:block}body.ios .article__header .article-kicker__section:first-letter,body.android .article__header .article-kicker__section:first-letter{text-transform:uppercase}body.ios .article__header .keyline-4,body.android .article__header .keyline-4{padding-top:12px!important}body.ios .article__header .meta__misc .byline__author,body.android .article__header .meta__misc .byline__author{font-family:Guardian Headline,Guardian Egyptian Web,Guardian Headline Full,Georgia,serif;font-weight:700}body.ios .article__header .meta__misc .byline__author a,body.android .article__header .meta__misc .byline__author a{font-weight:700}body.ios .article figure.element-image .figure__inner,body.android .article figure.element-image .figure__inner{height:auto!important}body.ios .article figure.element-atom+p,body.android .article figure.element-atom+p{margin-top:0}@media (scripting: enabled){:root article.content--interactive>div,:root .article{opacity:0;overflow:hidden}:root.interactive-loaded article.content--interactive>div,:root.interactive-loaded .article{opacity:1;transition:opacity 1s ease;overflow:unset}}[data-article-theme=News]{--active-pillar-100: #660505;--active-pillar-200: #8b0000;--active-pillar-300: #ab0613;--active-pillar-400: #c70000;--active-pillar-500: #ff5943;--active-pillar-600: #ffbac8;--furniture-card-gradient-color: rgba(139, 0, 0, .6)}[data-article-theme=Lifestyle]{--active-pillar-100: #510043;--active-pillar-200: #650054;--active-pillar-300: #7d0068;--active-pillar-400: #bb3b80;--active-pillar-500: #ffabdb;--active-pillar-600: #fec8d3;--furniture-card-gradient-color: rgba(101, 0, 84, .6)}[data-article-theme=Culture]{--active-pillar-100: #3e3323;--active-pillar-200: #574835;--active-pillar-300: #6b5840;--active-pillar-400: #866d50;--active-pillar-500: #eacca0;--active-pillar-600: #e7d4b9;--furniture-card-gradient-color: rgba(87, 72, 53, .6)}[data-article-theme=Sport]{--active-pillar-100: #003c60;--active-pillar-200: #004e7c;--active-pillar-300: #005689;--active-pillar-400: #0077b6;--activeHier ist der neu geschriebene Text in fließendem, natürlichem Englisch:
---
- Pillar 500: #00b2ff;
- Active Pillar 600: #90dcff;
- Furniture-Card-Verlaufsfarbe: rgba(0, 78, 124, .6)
Für Android-Geräte:
- Höhe der oberen Symbolleiste: 58px
- Höhe der unteren Symbolleiste: 56px
- Viewport-Höhe (ohne obere Symbolleiste): calc(100vh - 58px)
Für iOS-Geräte:
- Höhe der oberen Symbolleiste: 44px
- Höhe der unteren Symbolleiste: 50px
- Höhe der oberen Symbolleiste (alternativ): 20px
- Viewport-Höhe (ohne untere Symbolleiste): calc(100vh - 50px)
Auf Bildschirmen mit einer Höhe von mindestens 670px auf iOS:
- Höhe der unteren Symbolleiste: 84px
- Höhe der oberen Symbolleiste: 44px
Auf Bildschirmen mit einer Höhe von mindestens 800px auf iOS:
- Höhe der oberen Symbolleiste: 94px
Der Container für das obere Banner ist standardmäßig ausgeblendet.
Für interaktive Artikel hat der Hauptinhaltsbereich kein Padding.
Auf Bildschirmen, die breiter als 61.25em sind, verwendet das interaktive Raster eine einzelne Spalte ohne Abstände, und die Layoutbereiche sind wie folgt angeordnet: Titel, Überschrift, Vorspann, Medien, Linien, Metadaten, Inhalt und ein leerer Bereich.
Auf Bildschirmen, die breiter als 71.25em sind, wird das Raster zu vier Spalten: 79px, 1px, auto und 79px, mit 10px Abständen. Die Layoutbereiche sind wie folgt angeordnet: Titel, Rand, Überschrift und rechte Spalte in der ersten Zeile; dann Rand, Vorspann und rechte Spalte; dann Rand, Medien und rechte Spalte; dann Rand, Inhalt und rechte Spalte; und schließlich Rand und rechte Spalte.
Auf Bildschirmen, die breiter als 81.25em sind, erweitern sich die seitlichen Spalten auf jeweils 159px.
Der Titelbereich ist ausgeblendet (Nullhöhe, Überlauf verborgen).
Der Hauptinhaltsbereich hat keinen oberen Rand.
Auf Bildschirmen, die breiter als 46.25em sind, hat der Hauptinhalt kein rechtes Padding.
Die interaktive Hauptspalte ist relativ positioniert.
Alle Element-Atome darin sind ausgeblendet (Nullhöhe, kein Rand oder Padding).
Der Medienbereich ist klebrig (sticky), oben links positioniert, nimmt die volle Viewport-Breite und -Höhe ein, mit einem Z-Index von 0.
Eine dunkle Überlagerung (halbtransparentes Schwarz) wird über den Medien platziert, anfangs unsichtbar, und blendet ein, wenn der Text erweitert wird.
Auf Bildschirmen, die breiter als 46.25em sind, ist der Medienbereich 740px breit, ohne linken Rand.
Auf Bildschirmen, die breiter als 61.25em sind, wird er 630px breit und ist rechtsbündig ausgerichtet.
Die Bildunterschrift innerhalb der Medien ist oben mit zusätzlichem Padding positioniert.
Figuren und Lightbox-Bilder innerhalb der Medien starten unsichtbar und blenden über eine halbe Sekunde ein.
Ihre inneren Spans sind ausgeblendet, und ihre Divs nehmen die volle Höhe ein.
Das Kontrollkästchen-Label ist ausgeblendet.
Auf breiteren Bildschirmen sind alle Schaltflächen innerhalb von Links vollständig sichtbar und überlagert.
Bilder sind oben ausgerichtet.
Wenn eine Figur oder ein Lightbox-Bild die Klasse „show-me" hat, wird es sichtbar.
Für Benutzer, die reduzierte Bewegung bevorzugen, ist der Einblendeffekt deaktiviert.
Figuren und Lightbox-Bilder sind absolut innerhalb des Mediencontainers positioniert.[data-gu-name=media] picture,
.content__main-column--interactive [data-gu-name=media] img,
.content__main-column--interactive [data-gu-name=media] gu-island[name=AppsLightboxImage] {
width: 100%;
height: 100%;
margin: 0;
}
.content__main-column--interactive [data-gu-name=media] figure:first-of-type label {
display: none !important;
}
@media (min-width: 46.25em) {
.content__main-column--interactive [data-gu-name=media] figure:first-of-type a.open-lightbox {
display: none;
}
.content__main-column--interactive [data-gu-name=media] figure:first-of-type picture + span {
display: block;
}
}
@media (min-width: 61.25em) {
.content__main-column--interactive [data-gu-name=media] figure:first-of-type picture + span label {
display: block;
}
.content__main-column--interactive [data-gu-name=media] figure:first-of-type picture + span #the-caption figcaption {
padding-top: 8px;
}
}
.content__main-column--interactive [data-gu-name=media] figure:first-of-type.card-figure.video-container.loop:after {
content: "Video Loops werden als Hauptmedium in SnapSlides nicht unterstützt. Entfernen Sie die Schleife und wählen Sie stattdessen ein Cinemagraph oder ein statisches Bild.";
position: absolute;
top: 50px;
left: 8px;
color: #c70000;
font-family: Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
text-transform: uppercase;
font-weight: 700;
font-size: 20px;
padding: 2px 6px;
z-index: 100;
max-width: 500px;
}
.content__main-column--interactive [data-gu-name=media] figure:first-of-type.cinemagraph {
height: 100vh;
width: 100vw;
}
.content__main-column--interactive [data-gu-name=media] figure:first-of-type.cinemagraph div:has(video),
.content__main-column--interactive [data-gu-name=media] figure:first-of-type.cinemagraph video {
height: 100vh;
width: 100%;
object-fit: cover;
}
@media (min-width: 46.25em) {
.content__main-column--interactive [data-gu-name=media] figure:first-of-type.cinemagraph {
max-width: 740px;
}
}
@media (min-width: 61.25em) {
.content__main-column--interactive [data-gu-name=media] figure:first-of-type.cinemagraph {
max-width: 630px;
}
}
.content__main-column--interactive [data-gu-name=media] .media-placeholder {
width: 100%;
height: 100%;
background-color: #ededed;
position: absolute;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.content__main-column--interactive [data-gu-name=media] .media-placeholder.show-me {
opacity: 1;
}
@media (min-width: 61.25em) {
.content__main-column--interactive [data-gu-name=media] .media-placeholder {
background-color: #fff;
}
}
@media (prefers-reduced-motion: reduce) {
.content__main-column--interactive [data-gu-name=media] .media-placeholder {
transition: none;
}
}
.content__main-column--interactive [data-gu-name=media] .card-figure figure > div {
width: 100%;
height: 100%;
padding: 0 10px;
display: flex;
justify-content: center;
align-items: center;
}
.content__main-column--interactive [data-gu-name=media] .card-figure figure > div > div {
border-radius: 8px;
height: auto;
max-height: 95%;
width: auto;
overflow: hidden;
}
.content__main-column--interactive [data-gu-name=media] .card-figure.show-me figure {
opacity: 1;
}
.content__main-column--interactive [data-gu-name=media] .card-figure.video-portrait figure > div > div {
width: auto;
max-height: unset;
border-radius: 8px;
}
@media (min-width: 61.25em) {
.content__main-column--interactive [data-gu-name=media] .card-figure.video-portrait figure > div > div {
height: 95%;
}
}
.content__main-column--interactive [data-gu-name=media] .card-figure.video-portrait figure > div > div > div {
height: fit-content;
position: relative;
}
.content__main-column--interactive [data-gu-name=media] .card-figure.video-portrait:has(.cinemagraph) figure.cinemagraph,
.content__main-column--interactive [data-gu-name=media] .card-figure.video-portrait:has(.cinemagraph) figure.cinemagraph div:has(video),
.content__main-column--interactive [data-gu-name=media] .card-figure.video-portrait:has(.cinemagraph) figure.cinemagraph video {
height: 100vh;
width: 100%;
margin: 0;
padding: 0 !important;
border-radius: 0;
}
.content__main-column--interactive [data-gu-name=media] .card-figure.video-portrait:has(.cinemagraph) figure.cinemagraph video {
object-fit: cover;
}
.content__main-column--interactive [data-gu-name=media] .card-figure:has(>[data-component=youtube-embed]) {
display: fl
Hier ist der neu geschriebene Text in fließendem, natürlichem Englisch:
Die Inhaltsspalte verwendet Flexbox, um Elemente sowohl horizontal als auch vertikal zu zentrieren. Wenn ein Medienelement einen YouTube-Embed enthält, passt der Container der Kartenfigur seine Höhe an den Inhalt an, fügt abgerundete Ecken hinzu und verbirgt Überlauf. Iframes in interaktiven Medienblöcken nehmen die volle Höhe ihres Containers ein.
Der Karten-Wrapper ist relativ zur Seite positioniert und um die volle Viewport-Höhe nach oben verschoben. Auf Bildschirmen, die breiter als 61.25em (etwa 980px) sind, ist der Wrapper auf 460px Breite mit einem kleinen linken Rand begrenzt. Auf Bildschirmen, die breiter als 71.25em (etwa 1140px) sind, wird dieser linke Rand entfernt.
Für dunkel gestaltete Artikel ist die Randfarbe auf ein dunkles Grau gesetzt. Auf Bildschirmen, die breiter als 46.25em (etwa 740px) sind, wird der Artikelhintergrund zu einem sehr dunklen Grau. Medien-Platzhalter und Kartenfiguren in diesen Artikeln verwenden auf kleineren Bildschirmen einen etwas helleren dunklen Hintergrund und wechseln auf größeren Bildschirmen zum gleichen dunklen Grau wie der Artikel.
In der iOS-App nehmen Medienbereiche die volle Viewport-Höhe ein, und der Karten-Wrapper ist um denselben Betrag nach oben verschoben. Der Metadatenbereich blendet seinen Container aus, wenn er eine „Listen to Article"-Komponente enthält.
Wenn sich das System im Dunkelmodus befindet (und die Website nicht auf den Hellmodus erzwungen wird), gelten dieselben Anpassungen für das dunkle Design: Der Artikelrand wird dunkelgrau, der Hintergrund wird auf größeren Bildschirmen sehr dunkelgrau, und Medien-Platzhalter und Kartenfiguren verwenden die entsprechenden dunklen Farbtöne.
Das Wurzelelement definiert eine Teilen-Schaltflächenfarbe basierend auf der aktiven Säule und setzt einen Opazitätswert. Artikelkarten mit dem Stil „furniture" verwenden Space-Between für das Layout und haben Padding. Eine Info-Schaltfläche erscheint in der oberen rechten Ecke dieser Karten – sie ist kreisförmig, halbtransparent und klickbar. Auf breiteren Bildschirmen ist sie weiter rechts positioniert. Eine Lightbox-Schaltfläche ist auf kleinen Bildschirmen ausgeblendet, erscheint auf mittleren Bildschirmen (reagiert jedoch nicht auf Klicks) und verschwindet auf großen Bildschirmen wieder.
Serien-Labels innerhalb dieser Karten werden als fettgedruckter weißer Text auf farbigem Hintergrund mit einer Serifenschrift angezeigt. Der Überschriftenbereich hat einen unteren Rand, wobei die Hauptüberschrift in einer fetten, großen Serifenschrift gesetzt ist. Unterüberschriften verwenden dieselbe Serifenschrift mit Versalziffern.e-card [data-gu-name=headline] h2:has(strong) {
font-size: 24px;
padding-top: 0;
}
.article-card.furniture-card [data-gu-name=headline] h2:not(:has(strong)) {
font-size: 42px;
font-weight: 200;
}
.article-card.furniture-card [data-gu-name=standfirst] p {
font-size: 17px;
}
.article-card.furniture-card [data-gu-name=meta] {
display: grid;
grid-template-areas: "byline byline share";
grid-template-columns: 1fr 1fr auto;
}
@media (min-width: 61.25em) {
.article-card.furniture-card [data-gu-name=meta] {
grid-template-columns: 1fr;
grid-template-areas: "byline" "share";
}
}
.article-card.furniture-card [data-gu-name=meta] address {
grid-area: byline;
}
.article-card.furniture-card [data-gu-name=meta] address a {
border-bottom: none;
}
.article-card.furniture-card [data-gu-name=meta] address .byline a,
.article-card.furniture-card [data-gu-name=meta] address .byline span {
color: var(--active-pillar-400);
}
.article-card.furniture-card [data-gu-name=meta] address+div {
--article-link-text: var(--active-pillar-400);
}
.article-card.furniture-card [data-gu-name=meta] address+div a:hover {
color: #fff;
}
.article-card.furniture-card [data-gu-name=meta] address,
.article-card.furniture-card [data-gu-name=meta] address+div {
padding-top: 4px;
border-top: 1px solid var(--article-border);
}
.article-card.furniture-card [data-gu-name=meta] address+div {
grid-area: share;
}
@media (min-width: 61.25em) {
.article-card.furniture-card [data-gu-name=meta] address+div {
border-top: none;
padding-top: 0;
}
}
.article-card.furniture-card [data-gu-name=meta] .meta__social,
.article-card.furniture-card [data-gu-name=meta] .meta__comment {
padding-top: 0;
border: none;
}
.article-card.furniture-card .slides-counter {
border-radius: 18px;
padding: 0 4px 2px 6px;
background-color: #121212b3;
width: -moz-fit-content;
width: fit-content;
}
.article-card.furniture-card .slides-counter-wrapper {
padding: 4px 4px 3px 0;
color: #fff;
font-family: Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 130%;
border-bottom: none;
margin: 0;
}
.article-card.furniture-card .slides-counter-wrapper svg {
margin-bottom: -3px;
}
@media (min-width: 46.25em) {
.article-card.furniture-card .slides-counter {
position: absolute;
}
}
@media (min-width: 61.25em) {
.article-card.furniture-card .slides-counter {
position: static;
padding: 0 5px 2px 8px;
}
.article-card.furniture-card .slides-counter-wrapper {
font-size: 15px;
}
.article-card.furniture-card .slides-counter-wrapper svg {
margin-bottom: -1px;
}
}
@media (min-width: 61.25em) {
.article-card.furniture-card {
padding: 10px 0;
}
}
article.feature-dark .article-card--content.furniture-card--content {
background: linear-gradient(0deg, #12121266 0% 100%), var(--furniture-card-gradient-color);
}
article.feature-dark .article-card--content.furniture-card--content [data-gu-name=headline] h1 {
color: var(--active-pillar-500);
}
article.feature-dark .article-card--content.furniture-card--content [data-gu-name=meta] {
--byline: var(--active-pillar-500);
}
article.feature-dark .article-card--content.furniture-card--content [data-gu-name=meta] a,
article.feature-dark .article-card--content.furniture-card--content [data-gu-name=meta] svg,
article.feature-dark .article-card--content.furniture-card--content [data-gu-name=meta] button {
--article-link-text: var(--active-pillar-500);
--share-button: var(--active-pillar-500);
}
article.feature-dark .article-card--content.furniture-card--content [data-gu-name=meta] .byline,
article.feature-dark .article-card--content.furniture-card--content [data-gu-name=meta] .byline a,
article.feature-dark .article-card--content.furniture-card--content [data-gu-name=meta] .byline span {
color: var(--active-pillar-500);
}
article.feature-dark .article-card--content.furniture-card--content [data-gu-name=meta] .meta__social a,
article.feature-dark .article-card--content.furniture-card--content [data-gu-name=meta] .meta__social button {
border-color: var(--article-border) !important;
}
article.feature-dark [data-component=series] {
background-color: var(--active-pillar-500);
color: #121212;
}
article.explainer [data-gu-name=headline] h1:before {
content: "Explainer";
display: block;
font-family: Guardian Headline Full, Guardian Egyptian Web, Georgia, ser;
}if;font-size:17px;font-weight:700;line-height:115%;color:#fff;background-color:var(--active-pillar-400);width:-moz-max-content;width:max-content;padding:3px 6px 4px}article.explainer.feature-dark [data-gu-name=headline] h1:before{background-color:var(--active-pillar-500);color:#121212}article:not(.feature-light):not(.feature-dark).news .article-card.furniture-card [data-gu-name=headline] h1{font-weight:500}[data-rendering-target=apps] article.feature-dark .article-card p{color:#dcdcdc!important}[data-rendering-target=apps] .article-card.furniture-card [data-gu-name=meta]{display:block}[data-rendering-target=apps] .article-card.furniture-card [data-gu-name=meta] .byline>span>div{display:none!important}@media (min-width: 46.25em){[data-rendering-target=apps] .article-card.furniture-card [data-gu-name=meta] .byline>span:has(gu-island){display:block}}[data-rendering-target=apps] .article-card.furniture-card [data-gu-name=meta] address,[data-rendering-target=apps] .article-card.furniture-card [data-gu-name=meta] address+div{border:none!important}@media (min-width: 61.25em){[data-rendering-target=apps] .article-card.furniture-card [data-gu-name=meta] address+div{display:none}}[data-rendering-target=apps] .article-card.furniture-card [data-gu-name=meta] .content__meta-container_dcr svg{display:none!important}[data-rendering-target=apps] .article-card.furniture-card [data-gu-name=meta] [data-gu-name=follow]{margin-top:8px}@media (prefers-color-scheme: dark){:root:root:not([data-color-scheme=light]) article .article-card--content.furniture-card--content{background:linear-gradient(0deg,#12121266 0% 100%),var(--furniture-card-gradient-color)}:root:root:not([data-color-scheme=light]) article .article-card--content.furniture-card--content [data-gu-name=headline] h1{color:var(--active-pillar-500)}:root:root:not([data-color-scheme=light]) article .article-card--content.furniture-card--content [data-gu-name=meta]{--byline: var(--active-pillar-500)}:root:root:not([data-color-scheme=light]) article .article-card--content.furniture-card--content [data-gu-name=meta] a,:root:root:not([data-color-scheme=light]) article .article-card--content.furniture-card--content [data-gu-name=meta] svg{--article-link-text: var(--active-pillar-500);--share-button: var(--active-pillar-500)}:root:root:not([data-color-scheme=light]) article .article-card--content.furniture-card--content [data-gu-name=meta] .byline,:root:root:not([data-color-scheme=light]) article .article-card--content.f
