UNIT 18 • STAGE 4 OF 7
The Nations
Nation profiles: Mille Lacs Band, Red Lake Nation, Pine Ridge. grid-column: 1 / -1 reinforced on the My Nation card.
Nation Profiles: What We Are Building
Stage 4 adds three nation profiles to the website. Each profile is a card with two distinct zones: a header area containing the nation's name and location, and a body area containing an introduction, status tags, and a timeline of key events from the Self-Determination Era. The three nations are the Mille Lacs Band of Ojibwe, the Red Lake Nation, and the Oglala Sioux Tribe at Pine Ridge.
These profiles are not just background. Each nation's experience during this era is different. Mille Lacs fought for its 1837 Treaty rights in federal court for nine years. Red Lake entered the era already holding unique protections it had negotiated in the 1800s. Pine Ridge was the site of Wounded Knee II and later won the largest Indian Claims case in U.S. history, and then refused the money.
The layout: 2-column grid with a full-width student card
The three nation profiles sit in a 2-column grid. The third card wraps to the second row. Below all three profiles, a "My Nation" student card spans the full width using grid-column: 1 / -1, the same technique from Stage 3's Cabazon callout. This is the second time you are using it. By Stage 5, it will feel automatic.
New CSS: Nations Grid and Profile Card
The nations grid is a 2-column layout. Each .nation-profile card has overflow: hidden, which clips the header's background color to the card's border radius. Without overflow: hidden, the header background would extend past the card's rounded corners and look broken.
.nations-grid {
display: grid;
grid-template-columns: 1fr 1fr; /* two equal columns */
gap: 28px;
margin-bottom: 56px;
}
.nation-profile {
background: var(--bg-card);
border: 1px solid var(--gold-border);
border-radius: 16px;
overflow: hidden; /* clips header bg to rounded corners */
}
Why overflow: hidden matters here
The profile header uses background: var(--bg-section), a slightly lighter shade than the card background. That header background fills all the way to the top edges. Without overflow: hidden on the parent, the header's color would bleed past the card's border-radius at the top corners, creating a square notch on what should be a smooth rounded card. overflow: hidden tells the browser to clip any child content at the parent's boundary, including its rounded corners.
New CSS: Profile Header and Body
The profile header sits at the top of each card with a slightly elevated background. The profile body holds the written content below it. Status tags use a flex-wrap layout so they flow naturally across multiple lines if needed.
.profile-nation-name {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(1.375rem, 2vw, 1.75rem);
font-weight: 900; line-height: 1.2; margin-bottom: 6px;
}
.profile-nation-location { font-size: 0.8125rem; color: var(--text-muted); font-weight: 500; letter-spacing: 0.04em; }
.profile-body { padding: 28px 32px 32px; }
.profile-intro { font-size: 0.9375rem; line-height: 1.75; color: var(--text-dim); margin-bottom: 20px; }
.status-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.status-tag {
font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.1em; padding: 4px 12px; border-radius: 3px;
background: rgba(119,141,169,0.1);
color: var(--gold);
border: 1px solid rgba(119,141,169,0.2);
}
New CSS: Profile Timeline
Each profile includes a timeline of key events. Each item is a 2-column grid: the year on the left, the event description on the right. The :not(:last-child) selector adds a dividing line between items without adding one after the last item.
.pt-item {
display: grid;
grid-template-columns: 72px 1fr; /* fixed year column */
gap: 12px;
padding: 14px 0;
}
.pt-item:not(:last-child) {
border-bottom: 1px solid var(--gold-border); /* no line after last item */
}
.pt-year {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1rem; font-weight: 900;
color: var(--gold); padding-top: 2px;
}
.pt-text { font-size: 0.875rem; line-height: 1.65; color: var(--text-dim); }
grid-column: 1 / -1, Again
Below the three nation profiles, a "My Nation" card spans the full width of the 2-column grid. This is the same technique as the Cabazon callout in Stage 3, grid-column: 1 / -1, but now inside a 2-column grid instead of a 3-column grid. The value works the same way regardless of column count: start at the first grid line, end at the last.
grid-column: 1 / -1; /* in a 2-col grid: 1 / -1 = 1 / 3 = spans both columns */
background: var(--bg-card);
border: 1px solid var(--gold-border);
border-top: 3px solid var(--gold); /* accent top border */
border-radius: 0 0 16px 16px; /* rounded only at bottom */
padding: 40px;
}
.my-nation-label { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold); margin-bottom: 8px; }
.my-nation-heading { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 900; line-height: 1.2; margin-bottom: 14px; }
.my-nation-body { font-size: 0.9375rem; line-height: 1.75; color: var(--text-dim); max-width: 760px; }
Stage 4 Complete!
Three nation profiles are now on your page. Scroll down in the preview and read each one. Verify that the Mille Lacs, Red Lake, and Pine Ridge cards appear in the 2-column grid, and that the My Nation card spans the full width below them. Stage 5 adds the court cases.
© 2026 Relentless Feather. All rights reserved.