I keep getting test failures in the CSS newspaper-layout class.
My code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glowing News</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="newspaper-layout">
<header class="title">
<h1>Glowing News</h1>
</header>
<figure class="cover-image">
<figcaption>A luminous, ethereal creature glowing softly in a dark, mysterious environment, symbolizing life.</figcaption>
</figure>
<article class="feature-article">
<h2>Breaking News: Scientists Discover a New Element That Glows in the Dark</h2>
<p>April 29, 2026 --- In a groundbreaking discovery, researchers at the Global Institute of Advanced Science have identified a new chemical element that naturally emits light in complete darkness. Named "Luminite," this element could revolutionize industries ranging from energy to healthcare.
The team, led by Dr. Elena Martinez, stumbled upon Luminite while experimenting with rare minerals from deep-sea volcanic vents. Unlike any known element, Luminite's atoms emit a soft, blue-green glow without any external energy source.
"This discovery opens up exciting possibilities," said Dr. Martinez. "Imagine buildings that light themselves at night or medical devices that don't require batteries."
Experts believe Luminite could lead to safer, more sustainable lighting solutions and even new treatments for certain medical conditions.
The scientific community is eagerly awaiting further studies, and the Global Institute plans to publish detailed findings next month.
Stay tuned for more updates on this illuminating breakthrough.
If you want, I can also help you format this article in HTML/CSS for a web page or a newspaper-style layout like the one in your CodePen editor. Just let me know!
</article>
<article class="secondary-article">
<h2>Glow Stones Could Replace Flashlights</h2>
<p> company has introduced "Glow Stones," small, durable rocks that absorb light during the day and emit a bright glow at night. Perfect for camping or emergency kits, these stones provide a safe, battery-free light source for outdoor enthusiasts.
</p>
</article>
<article class="small-article1">
<h3>Glow-in-the-Dark Trees Could Light Up Cities</h3>
<p>Scientists have genetically engineered trees that glow softly at night, potentially reducing the need for streetlights. These "LumoTrees" emit a gentle greenish light thanks to bioluminescent proteins. Urban planners are excited about the possibility of eco-friendly, natural lighting in parks and sidewalks.</p>
</article>
<article class="small-article2">
<h3>New Glow Paint Charges from Sunlight</h3>
<p>A startup has developed a revolutionary glow-in-the-dark paint that charges quickly under sunlight and glows brightly for up to 12 hours. This paint could be used for safety signs, bike paths, and even artistic murals that come alive after dark.</p>
</article>
<article class="small-article3">
<h3>Jellyfish Inspire Glow Tattoos</h3>
<p>Tattoo artists are experimenting with inks inspired by bioluminescent jellyfish, creating tattoos that glow under UV light. These "glow tattoos" are becoming popular in nightlife scenes and festivals, offering a unique way to express creativity.
</p>
</article>
</main>
</body>
</html>
Css
.newspaper-layout {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto 1fr 1fr 1fr;
gap: 0.5em;
grid-template-areas: "title title title"
"feature-article feature-article cover-image"
"secondary-article secondary-article cover-image"
"small-article1 small-article2 small-article3";
}
.newspaper-layout > .title {
grid-area: title;
width: 100%;
text-align: center;
}
.newspaper-layout > .feature-article {
grid-area: feature-article;
}
.newspaper-layout > .cover-image {
grid-area: cover-image;
}
.cover-image img {
max-width: 100%;
}
.newspaper-layout > .small-article1 {
grid-area: small-article1;
}
.newspaper-layout > .small-article2 {
grid-area: small-article2;
}
.newspaper-layout > .small-article3 {
grid-area: small-article3;
}
.newspaper-layout > .secondary-article {
grid-area: secondary-article;
}