‘What choice do we have?’: Ukraine’s exhausted frontline soldiers see no end to the war.

This CSS code defines a custom font family called “Guardian Headline Full” with multiple font weights and styles. It includes light, regular, medium, and semibold weights, each with normal and italic variations. The font files are provided in WOFF2, WOFF, and TrueType formats, hosted on the Guardian’s servers.@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff2) format(“woff2”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff) format(“woff”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.ttf) format(“truetype”);
font-weight: 700;
font-style: normal;
}

@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;
}

@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.woff2) format(“woff2”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.woff) format(“woff”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.ttf) format(“truetype”);
font-weight: 400;
font-style: italic;
}The font “Guardian Headline Full” is defined with multiple styles and weights. The regular italic style uses font-weight 400 and includes files in woff2, woff, and truetype formats. The medium style (font-weight 500, normal) and medium italic (font-weight 500, italic) are also provided. Similarly, semibold (font-weight 600, normal), semibold italic (font-weight 600, italic), bold (font-weight 700, normal), bold italic (font-weight 700, italic), black (font-weight 900, normal), and black italic (font-weight 900, italic) styles are included, each with corresponding font files.The text appears to be a mix of CSS font definitions and responsive grid layout rules for a website, likely The Guardian. Here is a rewritten version in fluent, natural English:

The code defines custom fonts for the website, including “Guardian Headline” in black italic and “Guardian Titlepiece” in bold, specifying their file sources and styles.

It also sets up a responsive grid layout for the main article content. On smaller screens, the layout is a single column. As the screen gets wider, the layout adjusts: it adds padding, introduces a right-hand column, and eventually includes a left border and more complex grid areas to organize elements like the title, headline, media, and body text. Captions for immersive images are given specific padding and maximum widths at certain screen sizes.For interactive grid figures with immersive captions, the caption padding is set to 4 pixels at the top and 0 elsewhere. In various content areas, elements named “lines” and “meta” are positioned within the grid from row 2, column 1 to row 5, column 2. The “lines” elements adjust their height to fit content and have a top margin of 5 pixels, while “meta” elements have an 18-pixel top margin.

On wider screens, the interactive grid uses a five-column layout with specific widths: 219 pixels, 1 pixel, 620 pixels, 80 pixels, and 300 pixels.

For iOS and Android devices, article headers use specific fonts and styling. The standfirst text uses the Guardian Headline font with medium weight. Section kickers are displayed as blocks with their first letter capitalized. A keyline element has a top padding of 12 pixels. Author bylines use the Guardian Headline font with bold weight, including links. Images within articles have their height set to auto, and paragraphs following atomic elements have no top margin.

Additionally, a custom font called “Guardian Headline Full” is defined with light and light italic variants, sourced from specific URLs in WOFF2, WOFF, and TrueType formats.The provided text appears to be a series of CSS font-face rules for a font family named “Guardian Headline Full.” These rules define different font weights and styles (like regular, italic, medium, bold, etc.) and specify the web addresses (URLs) where the actual font files can be found in various formats (WOFF2, WOFF, TTF).@font-face {
font-family: ‘Guardian Headline Full’;
src: url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff2’) format(‘woff2’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff’) format(‘woff’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.ttf’) format(‘truetype’);
font-weight: 900;
font-style: normal;
}

@font-face {
font-family: ‘Guardian Headline Full’;
src: url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff2’) format(‘woff2’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff’) format(‘woff’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-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;
}

@media (min-width: 71.25em) {
.content__main-column–interactive {
margin-left: 160px;
}
}

@media (min-width: 81.25em) {
.content__main-column–interactive {
margin-left: 240px;
}
}

.content__main-column–interactive .element-atom {
max-width: 620px;
}

@media (max-width: 46.24em) {
.content__main-column–interactive .element-atom {
max-width: 100%;
}
}

.content__main-column–interactive .element-showcase {
margin-left: 0;
}

@media (min-width: 46.25em) {
.content__main-column–interactive .element-showcase {
max-width: 620px;
}
}

@media (min-width: 71.25em) {
.content__main-column–interactive .element-showcase {
max-width: 860px;
}
}

.content__main-column–interactive .element-immersive {
max-width: 1100px;
}

@media (max-width: 46.24em) {
.content__main-column–interactive .element-immersive {
width: calc(100vw – var(–scrollbar-width, 0px));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(–half-scrollbar-width, 0px)) !important;
margin-right: calc(-50vw + var(–half-scrollbar-width, 0px)) !important;
}
}

@media (min-width: 46.25em) {
.content__main-column–interactive .element-immersive {
transform: translate(-20px);
width: calc(100% + 60px);
}
}

@media (max-width: 71.24em) {
.content__main-column–interactive .element-immersive {
margin-left: 0;
margin-right: 0;
}
}

@media (min-width: 71.25em) {
.content__main-column–interactive .element-immersive {
transform: translate(0);
width: auto;
}
}

@media (min-width: 81.25em) {
.content__main-column–interactive .element-immersive {
max-width: 1260px;
}
}

.content__main-column–interactive p,
.content__main-column–interactive ul {
max-width: 620px;
}

.content__main-column–interactive:before {
position: absolute;
top: 0;
height: calc(100% + 15px);
min-height: 100px;
content: “”;
}

@media (min-width: 71.25em) {
.content__main-column–interactive:before {
border-left: 1px solid #dcdcdc;
z-index: -1;
left: -10px;
}
}

@media (min-width: 81.25em) {
.content__main-column–interactive:before {
border-left: 1px solid #dcdcdc;
left: -11px;
}
}

.content__main-column–interactive .element-atom {
margin-top: 0;
margin-bottom: 0;
padding-bottom: 12px;
padding-top: 12px;
}

.content__main-column–interactive p + .element-atom {
padding-top: 0;
padding-bottom: 0;
margin-top: 12px;
margin-bottom: 12px;
}

.content__main-column–interactive .element-inline {
max-width: 620px;
}

@media (min-width: 61.25em) {
figure[data-spacefinder-role=”inline”].element {
max-width: 620px;
}
}

:root {
–dateline: #606060;
–headerBorder: #dcdcdc;
–captionText: #999;
–captionBackground: hsla(0, 0%, 7%, 0.72);
–feature: #c70000;
–new-pillar-colour: var(–primary-pillar, var(–feature));
}

.content__main-column–interactive .element.element-atom,
.element.element-atom {
padding: 0;
}

#article-body > div .element-atom:first-of-type + p:first-of-type,
#article-body > div .element-atom:first-of-type {The first paragraph after certain elements like sign-in gates, horizontal rules, or specific containers gets a top padding of 14 pixels.

For the first letter of the first paragraph following those same elements, apply a drop cap style. This uses a specific headline font with bold weight, a size of 111px, and a line height of 92px. It floats to the left, is uppercase, and uses a custom color variable. It also has an 8px right margin and aligns to the top of the text.

Paragraphs that come immediately after a horizontal rule have no top padding.

Elements with the attribute `data-gu-name=”pullquote”` inside main content areas have a maximum width of 620 pixels.

For showcase elements within article containers, the figure caption is positioned statically, spans 100% width, and is also limited to 620 pixels.

Immersive elements span the full viewport width, minus the scrollbar. On screens smaller than 71.24em, these immersive elements are constrained to a maximum width of 978 pixels.@media (max-width: 71.24em) and (min-width: 30em) {
.element.element–immersive.element-immersive figcaption {
padding-inline: 20px;
}
}

@media (min-width: 46.25em) and (max-width: 61.24em) {
.element.element–immersive.element-immersive {
max-width: 738px;
}
}

@media (max-width: 46.24em) {
.element.element–immersive.element-immersive {
margin-left: -10px !important;
margin-right: 0 !important;
left: 0;
}
}

@media (max-width: 46.24em) and (min-width: 30em) {
.element.element–immersive.element-immersive {
margin-left: -20px !important;
}
.element.element–immersive.element-immersive figcaption {
padding-inline: 20px;
}
}

@media (min-width: 61.25em) {
.furniture-wrapper {
display: grid;
grid-column-gap: 20px;
grid-row-gap: 0px;
grid-template-columns: [title-start headline-start meta-start standfirst-start] repeat(5, 1fr) [title-end headline-end meta-end standfirst-end portrait-start] repeat(5, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] .25fr [title-end headline-start] 1fr [headline-end standfirst-start] .75fr [standfirst-end meta-start] auto [meta-end portrait-end];
}
.furniture-wrapper #headline > div:first-child,
.furniture-wrapper [data-gu-name=headline] > div:first-child,
.furniture-wrapper .headline > div:first-child {
border-top: 1px solid var(–headerBorder);
}
.furniture-wrapper #meta,
.furniture-wrapper [data-gu-name=meta] {
position: relative;
padding-top: 2px;
margin-right: 0;
}
.furniture-wrapper .standfirst .content__standfirst,
.furniture-wrapper #standfirst .content__standfirst,
.furniture-wrapper [data-gu-name=standfirst] .content__standfirst {
margin-bottom: 4px;
}
.furniture-wrapper .standfirst ul li,
.furniture-wrapper #standfirst ul li,
.furniture-wrapper [data-gu-name=standfirst] ul li {
font-size: 20px;
}
.furniture-wrapper .standfirst li a,
.furniture-wrapper .standfirst a,
.furniture-wrapper #standfirst li a,
.furniture-wrapper #standfirst a,
.furniture-wrapper [data-gu-name=standfirst] li a,
.furniture-wrapper [data-gu-name=standfirst] a {
border-bottom: none;
background-image: none !important;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: var(–headerBorder, #dcdcdc);
}
.furniture-wrapper .standfirst li a:hover,
.furniture-wrapper .standfirst a:hover,
.furniture-wrapper #standfirst li a:hover,
.furniture-wrapper #standfirst a:hover,
.furniture-wrapper [data-gu-name=standfirst] li a:hover,
.furniture-wrapper [data-gu-name=standfirst] a:hover {
text-decoration-color: var(–new-pillar-colour);
}
.furniture-wrapper .standfirst p:first-of-type,
.furniture-wrapper #standfirst p:first-of-type,
.furniture-wrapper [data-gu-name=standfirst] p:first-of-type {
border-top: 1px solid var(–headerBorder);
padding-bottom: 0;
}
}

@media (min-width: 61.25em) and (min-width: 71.25em) {
.furniture-wrapper .standfirst p:first-of-type,
.furniture-wrapper #standfirst p:first-of-type,
.furniture-wrapper [data-gu-name=standfirst] p:first-of-type {
border-top: unset;
}
}

@media (min-width: 61.25em) {
.furniture-wrapper figure {
margin: 0 0 0 -10px;
}
.furniture-wrapper figure[data-spacefinder-role=inline].element {
max-width: 630px;
}
}

@media (min-width: 71.25em) {
.furniture-wrapper {
grid-template-columns: [title-start headline-start meta-start] repeat(2, 1fr) [meta-end standfirst-start] repeat(5, 1fr) [title-end headline-end standfirst-end portrait-start] repeat(7, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] 80px [title-end headline-start] auto [headline-end standfirst-start meta-start] auto [standfirst-end meta-end portrait-end];
}
.furniture-wrapper #meta:before,
.furniture-wrapper [data-gu-name=meta]:before {
content: “”;
width: 540px;
position: absolute;
top: 0;
background-color: var(–headerBorder);
height: 1px;
}
.furniture-wrapper .standfirst p,
.furniture-wrapper #standfirst p,
.furniture-wrapper [data-gu-name=standfirst] p {
border-top: unset;
}
.furniture-wrapper .standfirst:before,
.furniture-wrapper #standfirst:before,
.furniture-wrapper [data-gu-name=standfirst]:before {
content: “”;
width: 1px;
background-color: var(–headerBorder);
height: 100%;
position: absolute;
top: 0;
left: .5px;
}
}

@media (min-width: 81.25em) {
.furniture-wrapper {
grid-template-columns: [title-start headline-start meta-start] repeat(3, 1fr) [meta-end standfirst-start];
}
}The grid layout uses five equal-width columns for the title, headline, and standfirst sections, followed by eight equal-width columns for the portrait section. The rows are defined with specific starting and ending points for each section.

For the meta and standfirst sections, certain elements have a fixed width or positioning. Labels within the title area have a small top padding.

The main headline uses a semi-bold font with a maximum width and specific font size, which adjusts on larger screens. Some decorative lines are hidden on medium to large screens and use a custom border color.

Social and comment elements in the meta section share the same border color, and certain interactive components are hidden. The standfirst section has adjusted margins and padding, with its text styled in a regular weight and specific size.

The main media area is positioned within the grid and has full width. On smaller screens, its width and margins are adjusted. Captions are positioned at the bottom with a background color and custom text styling, and some caption elements are hidden or conditionally displayed.

A caption toggle button is positioned at the bottom right with a circular design and background color. On very large screens, additional adjustments are made to the main content column’s positioning and height.The main column for interactive content has a maximum width of 620 pixels for h2 headings. On iOS and Android devices, the dark background color is set to #1a1a1a, with a feature color of #c70000 and a dark mode feature color of #ff5943. The new pillar color uses the primary pillar variable, defaulting to the feature color.

In dark mode, the new pillar color switches to the dark mode pillar variable, defaulting to the dark mode feature color.

For iOS and Android, the first letter of the first paragraph following specific elements in article containers is styled with the secondary pillar color (defaulting to black). The article header height is set to zero, and the furniture wrapper has padding of 4 pixels at the top, 10 pixels on the sides, and no padding at the bottom.

Within the furniture wrapper, content labels use a bold, specific font family, adopt the new pillar color, and are capitalized. Headlines (h1) are set to 32 pixels, bold, with 12 pixels of bottom padding, and a text color of #121212.For iOS and Android devices, the image elements within furniture wrappers across feature, standard, and comment article containers are styled with a relative position, a top margin of 14px, a left offset of -10px, and a width that fills the viewport minus the scrollbar. Their inner elements, images, and links have a transparent background and the same responsive width.

The standfirst sections in these containers have top and bottom padding with a right margin offset. The paragraphs inside use a specific set of serif fonts, and the links within them are consistently styled.For comment articles, links in the standfirst section are styled with a specific color, an underline, and no background image. On iOS and Android devices, when users hover over these links in feature, standard, or comment articles, the underline color changes. Also, on these devices, the metadata area in these article types has no margin, the author and byline text uses a specific color, and the miscellaneous metadata section has no padding.For iOS and Android devices, the following CSS rules apply across feature, standard, and comment article containers:

– SVG icons within the meta miscellaneous section use the new pillar color for their stroke.
– The caption button in showcase elements is displayed as a flex container, centered with 5px padding, 28px width and height, and positioned 14px from the right.
– The article body has 12px padding on the left and right.
– Non-thumbnail, non-immersive image figures within the article body have no margin, a width calculated as the viewport width minus 24px and the scrollbar width, and an automatic height. Their captions have no padding.
– Immersive image figures have a width calculated as the viewport width minus the scrollbar width.
– A pseudo-element before quoted blockquotes in the prose section is styled.For iOS and Android devices, the styling for blockquotes and links within article bodies is adjusted. Blockquotes use a specific color variable, while links are styled with an underline and change color on hover.

In dark mode, the background and text colors for article headers and metadata are modified to ensure readability and visual consistency.This appears to be CSS code for styling web articles on Android and iOS devices. The CSS sets colors for author bylines, icons, image captions, and blockquotes using custom color variables. It also applies a dark background to article content areas. The code targets specific article containers and elements across different device platforms and article types.This appears to be a CSS selector targeting the first letter of paragraphs in specific containers on iOS and Android devices. The selector applies to various article containers and body sections, looking for paragraphs that follow certain elements like `.element-atom`, `.sign-in-gate`, or `#sign-in-gate`.For Android and iOS devices, the first letter of paragraphs following specific elements in various article containers will be styled with a custom color variable.For comment articles on iOS and Android, the standfirst section has a top padding of 24px and no top margin. The main heading (h2) in the article text is set to 24px.

On iOS, the caption button has specific padding, while on Android, it uses slightly different padding values.

In dark mode, various text and link colors are adjusted to use lighter shades and specific dark mode color variables.

When the page has a Guardian organization logo, the branding element is forced to display.

On iOS and Android, labels and the main headline (h1) within article containers are set to a medium font weight (500). This also applies to the standfirst text paragraphs.

For a specific “weekend essay” theme, the page background and related sections use a light pink color (#fff4f2). A decorative lines element is hidden.

The main article header wrapper is positioned relatively. On larger screens, it uses a specific grid layout.

Within the header, a labels container has a fixed height. An animated book icon is positioned in its bottom-right corner, with its size increasing on larger screens. A horizontal separator line is also added at the bottom of this container, spanning the viewport width.For screens wider than 1140px, hide the decorative lines after labels in the article header and title sections. On screens wider than 1140px, set the height of the article header and title sections to 80px. For screens wider than 1300px, increase this height to 125px. Also, on screens wider than 1300px, adjust the top margin of the headline section upward by 2px.

Within the headline section, remove bottom padding from inner divs. The container for the main headline in portrait layouts should take full height, be positioned relatively, hide overflow, and have 24px of bottom padding. The headline text and links inside this container should not have a maximum width. When hovering over these headlines or links, the underline should be 2px thick and offset by 6px.

The text for headlines, links, and bylines in this container should have a line height of 115%, a medium font weight (500), and a font size of 36px. On screens wider than 1140px, increase this font size to 50px.

The standfirst section should be positioned relatively with 4px of top padding. On screens wider than 980px, remove this top padding. On screens wider than 1140px, add a small 2px top padding.

In the meta section, ensure the branding component is displayed as a block element..furniture-wrapper [data-gu-name=media] {
position: relative;
}

@media (min-width: 61.25em) {
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name=media] {
grid-area: portrait;
}
}

.furniture-wrapper #main-media > div,
.furniture-wrapper [data-gu-name=media] > div {
position: relative;
}

.furniture-wrapper #main-media div + span,
.furniture-wrapper [data-gu-name=media] div + span {
display: block;
}

.furniture-wrapper #main-media figure,
.furniture-wrapper [data-gu-name=media] figure {
height: 100%;
margin-left: 10px;
}

.furniture-wrapper #main-media figure picture img,
.furniture-wrapper #main-media figure figcaption,
.furniture-wrapper [data-gu-name=media] figure picture img,
.furniture-wrapper [data-gu-name=media] figure figcaption {
width: calc(100vw – 40px – var(–scrollbar-width, 0px));
height: auto;
margin-left: 10px;
padding: 10px 0;
}

.furniture-wrapper #main-media figure figcaption,
.furniture-wrapper [data-gu-name=media] figure figcaption {
margin-bottom: 10px;
padding: 10px;
}

.furniture-wrapper #main-media figure:before,
.furniture-wrapper [data-gu-name=media] figure:before {
content: “”;
display: block;
width: calc(100vw – 20px – var(–scrollbar-width, 0px));
background-image: url(https://interactive.guim.co.uk/atoms/2025/04/2025-weekend-essay-test/assets/v/1764331689/frame.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 10px;
height: inherit;
}

@media (min-width: 46.25em) {
.furniture-wrapper #main-media figure,
.furniture-wrapper [data-gu-name=media] figure {
margin-left: 0;
}

.furniture-wrapper #main-media figure picture img,
.furniture-wrapper [data-gu-name=media] figure picture img {
width: 670px;
height: auto;
margin-left: 5px;
padding: 15px 10px;
}

.furniture-wrapper #main-media figure:before,
.furniture-wrapper [data-gu-name=media] figure:before {
width: 700px;
left: -10px;
}

.furniture-wrapper #main-media figure figcaption,
.furniture-wrapper [data-gu-name=media] figure figcaption {
width: 650px;
margin-left: 15px;
margin-bottom: 15px;
padding: 15px 10px;
}
}

@media (min-width: 61.25em) {
.furniture-wrapper #main-media figure:before,
.furniture-wrapper [data-gu-name=media] figure:before {
width: 470px;
}

.furniture-wrapper #main-media figure picture img,
.furniture-wrapper [data-gu-name=media] figure picture img {
padding: 10px 0;
}

.furniture-wrapper #main-media figure figcaption,
.furniture-wrapper [data-gu-name=media] figure figcaption {
margin-bottom: 10px;
}
}

@media (min-width: 71.25em) {
.furniture-wrapper #main-media figure:before,
.furniture-wrapper [data-gu-name=media] figure:before {
width: 550px;
}

.furniture-wrapper #main-media figure picture img,
.furniture-wrapper [data-gu-name=media] figure picture img {
width: 520px;
margin-left: 5px;
padding: 10px 5px;
}

.furniture-wrapper #main-media figure figcaption,
.furniture-wrapper [data-gu-name=media] figure figcaption {
width: 510px;
margin-left: 10px;
margin-bottom: 10px;
}
}

@media (min-width: 81.25em) {
.furniture-wrapper #main-media figure:before,
.furniture-wrapper [data-gu-name=media] figure:before {
width: 630px;
}

.furniture-wrapper #main-media figure picture img,
.furniture-wrapper [data-gu-name=media] figure picture img {
width: 600px;
padding: 15px 0;
}

.furniture-wrapper #main-media figure figcaption,
.furniture-wrapper [data-gu-name=media] figure figcaption {
width: 600px;
margin-left: 5px;
margin-bottom: 15px;
}
}

.furniture-wrapper #main-media #caption-button,
.furniture-wrapper [data-gu-name=media] #caption-button {
right: 15px;
bottom: 20px;
}

@media (min-width: 46.25em) {
.furniture-wrapper #main-media #caption-button,
.furniture-wrapper [data-gu-name=media] #caption-button {
right: 45px;
bottom: 30px;
}
}

@media (min-width: 61.25em) {
.furniture-wrapper #main-media #caption-button,
.furniture-wrapper [data-gu-name=media] #caption-button {
right: 15px;
bottom: 20px;
}
}

@media (min-width: 71.25em) {
.furniture-wrapper #main-media #caption-button,
.furniture-wrapper [data-gu-name=media] #caption-button {
right: 20px;
}
}

@media (min-width: 81.25em) {
.furniture-wrap
}For the main media caption button, set the bottom position to 30px. In the furniture wrapper, center the content within the no-media-div both horizontally and vertically, making it full width. Style the paragraph inside with a 24px font, bold weight, underlined, and a specific color.

For interactive content columns wider than 71.25em, remove the left margin and hide the before pseudo-element. Style blockquotes within supporting asides with a background color. For the first letter of the first paragraph, use a light font weight. Apply a special drop cap style to the first letter after specific elements, using a large, uppercase, floated letter with specific font and color.

Style level-two headings with a reddish color, 28px font (32px on wider screens), light weight, and normal line height. If the heading contains strong text, make it medium weight. Set a background color for figures containing iframes.

On apps and specific operating systems, display the follow wrapper with a top margin and set its span font size to 14px. Ensure media elements fit their content. In dark mode, adjust background colors for the body and add after pseudo-elements to specific headers and labels.[data-app-os=android] .furniture-wrapper .article-header:after,
[data-app-os=android] .furniture-wrapper [data-gu-name=title] .content__labels:after {
background-image: url(https://interactive.guim.co.uk/atoms/2025/04/2025-weekend-essay-test/assets/v/1764331689/book-white.gif)
}

[data-rendering-target=apps] .furniture-wrapper .meta__byline gu-island[name=FollowWrapper] svg path,
[data-rendering-target=apps] .furniture-wrapper [data-component=meta-byline] gu-island[name=FollowWrapper] svg path,
[data-app-os=ios] .furniture-wrapper .meta__byline gu-island[name=FollowWrapper] svg path,
[data-app-os=ios] .furniture-wrapper [data-component=meta-byline] gu-island[name=FollowWrapper] svg path,
[data-app-os=android] .furniture-wrapper .meta__byline gu-island[name=FollowWrapper] svg path,
[data-app-os=android] .furniture-wrapper [data-component=meta-byline] gu-island[name=FollowWrapper] svg path {
fill: var(–byline-anchor, #ffffff) !important
}

[data-rendering-target=apps] .furniture-wrapper #main-media figure:before,
[data-rendering-target=apps] .furniture-wrapper [data-gu-name=media] figure:before,
[data-app-os=ios] .furniture-wrapper #main-media figure:before,
[data-app-os=ios] .furniture-wrapper [data-gu-name=media] figure:before,
[data-app-os=android] .furniture-wrapper #main-media figure:before,
[data-app-os=android] .furniture-wrapper [data-gu-name=media] figure:before {
background-image: url(https://interactive.guim.co.uk/atoms/2025/04/2025-weekend-essay-test/assets/v/1764331689/frame-white.png) !important
}

body.ios,
body.android {
background-color: #fff
}

body.ios #feature-article-container .furniture-wrapper .content__labels,
body.ios #standard-article-container .furniture-wrapper .content__labels,
body.ios #comment-article-container .furniture-wrapper .content__labels,
body.android #feature-article-container .furniture-wrapper .content__labels,
body.android #standard-article-container .furniture-wrapper .content__labels,
body.android #comment-article-container .furniture-wrapper .content__labels,
body.ios #feature-article-container .furniture-wrapper h1.headline,
body.ios #standard-article-container .furniture-wrapper h1.headline,
body.ios #comment-article-container .furniture-wrapper h1.headline,
body.android #feature-article-container .furniture-wrapper h1.headline,
body.android #standard-article-container .furniture-wrapper h1.headline,
body.android #comment-article-container .furniture-wrapper h1.headline {
font-weight: 500
}

@media (prefers-color-scheme: light) {
html:has(body.ios, body.android) {
background-color: var(–weekend-essay-bg, #fff4f2)
}
}

html:has(body.ios, body.android) body.ios,
html:has(body.ios, body.android) body.android {
–opinion-primary: #c74600;
–byline-anchor: var(–opinion-primary, #c74600);
–primary-pillar: var(–opinion-primary, #c74600)
}

@media (prefers-color-scheme: light) {
html:has(body.ios, body.android) body.ios,
html:has(body.ios, body.android) body.android {
background-color: var(–weekend-essay-bg, #fff4f2)
}
}

@media (prefers-color-scheme: dark) {
html:has(body.ios, body.android) body.ios,
html:has(body.ios, body.android) body.android {
–weekend-essay-bg: #1a1a1a;
–opinion-primary: #ff7f0f
}
html:has(body.ios, body.android) .garnett–pillar-opinion:not(.garnett–type-media).ios .article__body,
html:has(body.ios, body.android) .garnett–pillar-opinion:not(.garnett–type-media).ios .tags {
background-color: unset
}
}

body.ios #feature-article-container,
body.ios #standard-article-container,
body.ios #comment-article-container,
body.android #feature-article-container,
body.android #standard-article-container,
body.android #comment-article-container {
background-color: var(–weekend-essay-bg, #fff4f2)
}

@media (min-width: 61.25em) {
body.ios #feature-article-container .furniture-wrapper,
body.ios #standard-article-container .furniture-wrapper,
body.ios #comment-article-container .furniture-wrapper,
body.android #feature-article-container .furniture-wrapper,
body.android #standard-article-container .furniture-wrapper,
body.android #comment-article-container .furniture-wrapper {
grid-column-gap: 20px;
grid-row-gap: 0px;
grid-template-columns: [title-start headline-start meta-start standfirst-sThe grid is set up with five columns of equal width, starting from the title and ending at the portrait. The rows are defined with specific heights for the title, headline, standfirst, and meta sections, while the portrait spans from the title to the end.

For both iOS and Android devices, the title and GIF wrapper within the furniture container of feature, standard, and comment articles uses flexbox to arrange items in a row, spaced apart, and positioned relatively.

The labels inside this wrapper have a font size of 17 pixels, normal style, bold weight, and a line height of 115%.

Links within these labels are colored using a custom variable for the new pillar color (defaulting to #c74600) and have no text transformation applied.

The GIF container and its images are set to 70 pixels in both width and height. If the GIF container or image has the class “book-gif-white,” the same dimensions apply.For Android devices, hide the white book GIFs in feature, standard, and comment article containers. In dark mode, hide the regular book GIFs on both iOS and Android, and show the white versions instead. On iOS and Android, add a light gray horizontal line at the bottom of the title and GIF wrapper in these article containers. On larger screens, adjust the layout for iOS in feature and standard articles.The title-and-gif-wrapper class is assigned to the grid area named “title” for various article containers on both iOS and Android. For iOS devices, after elements in these wrappers within feature, standard, and comment articles have a width set to 50 viewport width units.

In dark mode, the after elements for these same wrappers across iOS and Android feature, standard, and comment articles have their background color changed to #606060.

On larger screens (61.25em and above), the portrait-mainmedia__headline-wrapper within the furniture wrapper is assigned to the grid area “headline” for feature, standard, and comment articles on both iOS and Android.

For headlines, bylines, and byline links within the furniture wrapper of feature, standard, and comment articles on iOS and Android, the font size is set to 36px with a normal style, medium weight (500), and a line height of 115%.For feature, standard, and comment article containers on iOS and Android devices, the byline text and links are set to a red color (#c70000) or a custom variable. In dark mode, this changes to a darker orange (#c74600). Avatars are hidden in these sections. Headlines have no bottom margin or padding. Bylines are displayed in italics.For iOS and Android devices, the author’s byline in feature, standard, and comment articles should be displayed in a normal font style, not italicized.

In these same article types, the main media container should have an automatic height, a 4:5 aspect ratio, and a transparent background. Any figure elements within this container should take up the full height and have no left margin.

Inside these figures, the inner containers should be positioned normally at the top-left, with a transparent background, no padding, and visible overflow.

For images within these figure elements, the width should be the full viewport width minus 40 pixels, with a left margin of 20 pixels and a top margin of 25 pixels.The CSS code sets specific styles for images and captions within article containers on iOS and Android devices. Images have a top margin of 13px, while captions are set to auto height with block display and a gray text color. For screens wider than 46.25em, figures expand to full width and include a left-aligned decorative element.For iOS and Android devices, the image width within article containers is set to the full viewport width minus 60 pixels, with a left margin of 30 pixels and a top margin of 40 pixels.

On larger screens (over 61.25em), the pseudo-element before the figure adjusts to half the viewport width minus 20 pixels and the scrollbar width. Images themselves become half the viewport width minus 40 pixels and the scrollbar width, with a left margin of 18 pixels, automatic height, no padding, and a top margin of 10 pixels.

For screens wider than 71.25em, the pseudo-element shifts upward by 4 pixels.

At 81.25em and above, the pseudo-element moves 20 pixels to the left, while images adjust to half the viewport width minus 90 pixels and the scrollbar width, with a left margin of 12 pixels, automatic height, a negative top margin of 10 pixels, and a top padding of 21 pixels.

In dark mode, additional styles apply to the figure element.For iOS and Android devices, the first image in specific article containers has a white frame background. On smaller screens, this image spans almost the full viewport width with padding. On larger screens, the image width adjusts to half the viewport with different margins and padding.For the main media figure element that is the first image, set the height to 100% and the maximum width to 620px as important.

On iOS and Android devices, for feature, standard, and comment article containers within the furniture wrapper, before the main media figure element that is the first image, set the width to 50vw minus 20px and the scrollbar width variable, align it to the left, and set the height to 100%.

For viewports at least 81.25em wide, adjust the left position to -20px for the same elements.

For viewports at least 46.25em wide, set the caption button’s bottom position to 45px within the main media section for the specified containers on iOS and Android.

For viewports at least 61.25em wide, assign the main media section to the grid area named “portrait,” set its maximum width to 620px as important, and allow the height to adjust automatically for the same containers on iOS and Android.

For figure elements within the furniture wrapper on iOS and Android, set the position to relative and remove the top margin.

For the inner figure element within these containers, position it absolutely, place it 15px from the top and 20px from the left, set the width to the full viewport width minus 40px, and allow the height to adjust automatically.

For images inside these inner figure elements, ensure they display correctly.Images within figure elements are set to cover their containers fully. On iOS and Android devices, caption buttons in article containers are positioned 24px from the right and 20px from the bottom.

For screens wider than 46.25em, the inner figure area adjusts to 680px wide with automatic height, positioned 10px from the top and left, while caption buttons move to 25px from the bottom.

On screens wider than 61.25em, figure elements themselves become half the viewport width minus 20px and the scrollbar width.

Standfirst sections in these article containers have no top margin, 8px top padding, and 10px right padding, with their before pseudo-elements hidden. Paragraphs, links, and list items within the standfirst inner container maintain consistent styling.For Android devices, links, list items, and paragraphs within the standfirst section of feature, standard, and comment articles have a font size of 20px, a normal style, medium weight, 115% line height, and no bottom padding.

On screens wider than 61.25em, the standfirst section for these article types on both iOS and Android is placed in the grid area named ‘standfirst’.

The meta section for these articles on both iOS and Android has no top padding. The published date within the meta section is positioned relatively. A thin gray line is displayed below the published date, extending the full viewport width and positioned at the bottom left.

On screens wider than 61.25em, the meta section is placed in the grid area named ‘meta’ and is displayed as a block. The line below the published date then extends only 50% of the viewport width.

On screens wider than 81.25em, the miscellaneous meta information for these articles on both iOS and Android…For iOS and Android devices, the meta section’s miscellaneous elements have no left margin. In dark mode, the published date indicator in article containers changes to a gray background.

On both iOS and Android, certain decorative lines and meta elements are hidden in article containers. Additionally, rich link sidebars and comment header cutouts are not displayed.

The main article and feature bodies have a light pink background with a top margin of 6 pixels. Horizontal rules within these sections are styled as thin gray lines, 150 pixels wide, with specific spacing.

The first letter of opening paragraphs is styled as a large, uppercase drop cap in a headline font. Any heading level two elements containing strong or bold text use a medium font weight.

When printing, these styles do not apply.For nearly 62 days on the frontline east of Pokrovske, Bohdan and Ivan stayed hidden—first in a village shop, and later, after a deadly firefight with Russian soldiers, in a small basement where they, infantrymen from Ukraine’s 31st Brigade, survived for seven more weeks. Supplies like food, water, and cigarettes were delivered by a friendly drone. Their toilet was their 3-square-meter room, and their closest comrades were about 200 meters away. Their only hope was to stay underground, knowing that if they were spotted, a Russian drone could kill them all.

While the conflict in Ukraine is often seen as a war of remotely piloted vehicles, the role of infantry is easily overlooked. In many parts of the front, the task of Ukrainian ground forces…The soldiers’ duty is to hold their position quietly as danger looms overhead. “I can’t sleep properly now,” says Bohdan, the more talkative of the two. “It’s too quiet for me.”

Ruslan (left), a battalion commander, at the command point of the 31st Brigade at an undisclosed location in eastern Ukraine.

When the infantrymen headed to the front at the end of September, a diplomatic effort to end the nearly four-year war following the Alaska summit seemed to have stalled. But by the time the crew returned at the end of November from the southeast of the Dnipropetrovsk region, a new Russian-U.S. peace plan had emerged.

Moscow’s demands were to hand over all of Donetsk province, just east of the soldiers’ position, abandon occupied territory to Russia, and permanently give up on joining NATO. Only then, Russia said, would it be willing to consider peace—effectively a demand for surrender. Ukraine objected. A revised plan incorporating Ukrainian input was later deemed “unacceptable” by Russia.

If Ukraine continues to fight, it is infantrymen like Bohdan, 41, who installed heating insulation before volunteering in 2022, and Ivan, a 45-year-old handyman who joined in July, who will have to risk their lives and hold the line for the foreseeable future.

“Nobody, of course, wants the war to continue because there have been a lot of sacrifices, a lot of victims,” says Bohdan, dirt still on his hands and uniform. “But at the same time we don’t want to give up, to give our land, because we don’t want those sacrifices to be wasted.”

This is a common feeling across the unit. Andriy, a 31-year-old sergeant responsible for drone operations at the command point, when asked about Ukraine handing over land for peace, responds, “Do you want me to be honest?” before adding, “It’s fucking bullshit.” A group of comrades listening in burst out laughing in agreement.

Despite the defiance of Bohdan and many soldiers like him, strains are showing elsewhere. A Ukrainian military psychologist said between 3% and 5% of those returning from frontline deployments need further examination or treatment, in addition to those killed or wounded. Bohdan and Ivan were being monitored to ensure they could be sent back to the front.

A record 21,602 soldiers went absent without leave from the Ukrainian army in October. A frequent complaint across the military is the lack of reserves, leading to a shortage of troops for rotations. Long frontline deployments are common. Last month, it emerged that Serhiy Tyshchenko, a platoon medic with the 30th Brigade, spent 471 days in one combat position in Donetsk province.

Bohdan and Ivan had not expected to be on the frontline for so long. “I told my wife I’ll be there for two weeks,” says Bohdan, a father of five. “She was calling everyone here, almost eating their brains, asking why it was taking so long?” But the soldiers were unaware of their families’ concerns.

While frontline drone crews have internet access through Starlink and can video call their families, the infantry have no such option. They can send radio messages home, but family members are not allowed to send messages back.

Anti-drone nets being constructed on a road in the Dnipropetrovsk region.

The ubiquity of drones, whose feeds are visible at command points well behind the frontlines, has fundamentally changed Russian tactics. Armored attacks, common in 2023, have long been abandoned after many Russian tanks were destroyed.

Instead, they have been replaced by perpetual probing of scattered Ukrainian positions to find weak points or weaker brigades, which can be followed by more substantive attacks. This appears to have happened east of Huliaipole in Zaporizhzhia province to the southwest, where about six miles of territory was lost last month.Ruslan, a battalion commander in the 31st Brigade, explains that Russian soldiers are now infiltrating in small groups of two or three to avoid detection by drones in the “kill zone,” which extends about 15 kilometers on either side of the front line. Some use thermal hoods of varying quality to try to hide from heat-seeking cameras that would otherwise outline their bodies clearly in white against a dark background.

He notes that fog and heavy rain have made it easier for the Russians to avoid being spotted. While the commander states that there is a 95% chance of killing them if they are seen, he acknowledges that the worsening weather allows Russian forces to gather behind the front lines with the aim of attacking and revealing Ukrainian defensive positions.

For soldiers Ivan and Bohdan, a sudden moment of danger occurred at 7 a.m. one morning when three Russians appeared unexpectedly just 10 to 15 meters away. The Ukrainians returned fire immediately, killing two, but the surviving Russian managed to call in drone strikes on their position before being killed by a Ukrainian drone.

The infantrymen scattered and later regrouped in a basement, around the same time U.S. envoy Steve Witkoff was reportedly making phone calls to the Kremlin offering Ukrainian territory. At one point, a Russian “Baba Yaga” drone bombed the entrance, partially blocking it with rubble. “We thought it would come back. Two more mines and we would have been finished,” Bohdan recalls.

No further strikes followed, leading the soldiers to believe it was a random attack. However, it became more difficult to venture outside to retrieve supplies dropped from above. Among the gear recovered was a new pair of boots for Bohdan, though they were two sizes too big.

The journey back to safety was the most terrifying part. It involved a 10 to 15-kilometer walk, as drones made vehicle travel too dangerous in the open countryside. A relief team had arrived, but for three days it was too risky to leave. When they finally got the chance, they were given only 10 minutes’ notice. The timing was favorable because visibility had worsened due to rain and fog. Even so, the walk back took three days, as they avoided moving at night and hid among trees to escape detection by drones with thermal sights.

They were eventually picked up, but not without a final moment of tension. “Just as we were driving, we saw another car hit by a drone. So there was no sense of relief then,” Bohdan says. Now, in the relative calm of the rear, they feel somewhat more relaxed and are prepared to return to the front “within a week at most” if necessary.

When asked if they are ready to risk their lives in another 62-day deployment, Bohdan responds, “What choice do we have?” He adds that after all the fighting, Ukraine should not have to accept a bad deal. “We have a saying in Ukraine: if you let a cat under the table, it will appear on the table. It’s the same with Putin.”

Frequently Asked Questions
FAQs What choice do we have Ukraines Exhausted Frontline Soldiers

Understanding the Situation
Q What is the main point of the article What choice do we have
A The article highlights the severe physical and mental exhaustion of Ukrainian frontline soldiers who feel trapped in a grueling war with no clear end in sight yet continue to fight out of a sense of duty and necessity

Q Why are Ukrainian soldiers described as exhausted
A They are exhausted due to prolonged combat without sufficient rest constant stress and trauma shortages of personnel and ammunition and the immense psychological toll of defending against a larger force for over two years

Q Is this about soldiers wanting to give up
A Not exactly Its about soldiers feeling there is no alternative but to keep fighting despite their fatigue and the wars toll Its a complex mix of resilience desperation and a lack of other perceived options

Causes and Context
Q What are the main reasons for this exhaustion and feeling of being trapped
A Key reasons include manpower shortages leading to longer frontline rotations delays in Western military aid the sheer scale and attritional nature of the conflict and the high personal stakes of defending their homeland from occupation

Q How does this differ from the early days of the war
A Early in the war there was a surge of mobilization and defensive energy Now after years of brutal trench warfare many of the original motivated volunteers are wounded killed or burned out and the conflict has settled into a draining war of attrition

Q Is this a problem of morale or a practical military problem
A Its both Low morale and burnout directly impact military effectiveness Practical problems like ammunition shortages and lack of rotations worsen morale creating a vicious cycle

Implications and Consequences
Q What are the risks if soldiers remain this exhausted
A Risks include increased casualties mental health crises decreased combat effectiveness potential for tactical mistakes and longterm societal challenges from a generation of traumatized veterans

Q Does this mean Ukraine is losing the war
A Not necessarily It highlights a critical challenge Ukraine must overcome The soldiers perseverance is a sign of strength but their exhaustion points to a strategic vulnerability that requires addressing through support supplies and

Related Posts