Problem with Multiple Column Styles within Stylesheet

Twine Version: 2.3.16
Story Format: SugarCube 2.36.1

I am new to Twine, and have been slowly learning the SugarCube story format. I recently changed from Harlowe to SugarCube, and have managed to clean up everything that broke as a result of the conversion.

One of the items that did not seem to break was the grid set up. I want to use the grid set up as a way to generate color-coded “cards” within the experiential learning module. Each card has a different image on the left, with text on the right. There are different colors, depending on whether an outcome is “good” or “bad.” Throughout the beginning of the story, the initial card color matched the passage background, both being a dark eggplant purple color. At specific terminal nodes, however, the card colors differ from the dark eggplant background, being either pink, gold, red, etc., depending on the nature of the player choice.

The problem is, that the multiple column/grid styles seem to be overriding each other, with the last one overtaking the specifications for all of the ones before it. Depending upon which style formatting is last, all of the grids turn out to be that same color, so that I am not able to customize the grid backgrounds within each passage.

I would appreciate any assistance you all could provide in ameliorating this issue.

A sample of the Twine code appears below.

((within the Story Stylesheet))

#passages {
margin: 2.5em 5em !important;
max-width: none;
}

body {
background-color: #221C34;
}

.passage a {
font-family: Georgia, Serif;
font-size: 150%
}

.passage a {
color: #0095C8;
}

.passage a:hover {
color: #BE3A34;
text-decoration: none;
}

.wrapper {
display: grid;
grid-template-columns: 25% 75%;
grid-template-areas:
"left-sidebar content"
"left-sidebar content"
"left-sidebar content";
}
.left-sidebar {
grid-area: left-sidebar;
background-color: #221C34;
padding: 10px;
padding-left: 20px
}
.content {
grid-area: content;
background-color: #221C34;
padding: 10px;
}

.dark {
color: #002A3A
}

.dark a {
color: #002A3A
}

.dark a:hover {
color: #2211C34;
text-decoration: none;
}

.danger {
display: grid;
grid-template-columns: 25% 75%;
grid-template-areas:
"left-sidebar content"
"left-sidebar content"
"left-sidebar content";
}
.left-sidebar {
grid-area: left-sidebar;
background-color: #CF202F;
padding: 10px;
padding-left: 20px
}
.content {
grid-area: content;
background-color: #CF202F;
padding: 10px;
}

.nogo {
display: grid;
grid-template-columns: 25% 75%;
grid-template-areas:
"left-sidebar content"
"left-sidebar content"
"left-sidebar content";
}
.left-sidebar {
grid-area: left-sidebar;
background-color: #DD0DA8;
padding: 10px;
padding-left: 20px
}
.content {
grid-area: content;
background-color: #DD0DA8;
padding: 10px;
}

.legacy {
display: grid;
grid-template-columns: 25% 75%;
grid-template-areas:
"left-sidebar content"
"left-sidebar content"
"left-sidebar content";
}
.left-sidebar {
grid-area: left-sidebar;
background-color: #F5A800;
padding: 10px;
padding-left: 20px
}
.content {
grid-area: content;
background-color: #F5A800;
padding: 10px;
}

((within one of the passages-- even though I specify the “danger” (red) formatting, Twine renders the color for the “legacy” formatting (which is gold).))

<div class="danger">
<div class="left-sidebar">
<img src=https://art.pixilart.com/a453b5b4afcc641.gif style="max-width: 100%"></div>
<div class="content"><span class="dark"><h1>(U) You Selected All</h1>\
"""(U//FOUO)""" CAUTION: All options within this category listing may not be authorized. Instead of selecting all options within this category, select each option individually.

(U) ''Go back to the [[Main Menu]].''</span>
</div>
</div>

It’s because you’re not making the left-sidebar and content element selectors descendants of the wrapper, danger, nogo, and legacy elements. Because you’re not, they have the same specificity and thus simply overriding the previous style rules.

Check out the following example selectors.

Example selectors
.wrapper {
	/* your properties here */
}
.wrapper > .left-sidebar {
	/* your properties here */
}
.wrapper > .content {
	/* your properties here */
}

.danger {
	/* your properties here */
}
.danger > .left-sidebar {
	/* your properties here */
}
.danger > .content {
	/* your properties here */
}

.nogo {
	/* your properties here */
}
.nogo > .left-sidebar {
	/* your properties here */
}
.nogo > .content {
	/* your properties here */
}

.legacy {
	/* your properties here */
}
.legacy > .left-sidebar {
	/* your properties here */
}
.legacy > .content {
	/* your properties here */
}

That said. Since all of your grid rules use exactly the same properties, you don’t need to duplicate them. Just move them to a separate class-based rule and use that in addition to the other classes on the outer wrapper <div>.

Example single grid rule

The HTML:
Note the two classes on the outer <div>.

<div class="grid danger">
	<div class="left-sidebar">…</div>
	<div class="content">…</div>
</div>

And the CSS:

.grid {
	display: grid;
	grid-template-columns: 25% 75%;
	grid-template-areas:
		"left-sidebar content"
		"left-sidebar content"
		"left-sidebar content";
}

.wrapper > .left-sidebar {
	/* your properties here */
}
.wrapper > .content {
	/* your properties here */
}

.danger > .left-sidebar {
	/* your properties here */
}
.danger > .content {
	/* your properties here */
}

.nogo > .left-sidebar {
	/* your properties here */
}
.nogo > .content {
	/* your properties here */
}

.legacy > .left-sidebar {
	/* your properties here */
}
.legacy > .content {
	/* your properties here */
}

As a final note. The wrapper, danger, nogo, and legacy classes seem to be unique in use—i.e., you don’t seem to be using more than one at a time. If that’s true, you could make them into IDs if you wanted.

Acknowledged!
It seems as each option is more streamlined than the previous one, with the first method basically completing/correcting the CSS, as I had originally written it. The second option (single grid rule), being more compact.

Could you illustrate the method of making the classes into IDs? I tried Googling that term, and came across this entry (which seems to be a bit confusing):

MDN (a.k.a. Mozilla Developer Network) is your friend for just about anything web technology related. For IDs, see the following:

Example ID usage

HTML:

<div id="danger" class="grid">
	<div class="left-sidebar">…</div>
	<div class="content">…</div>
</div>

CSS:

.grid {
	display: grid;
	grid-template-columns: 25% 75%;
	grid-template-areas:
		"left-sidebar content"
		"left-sidebar content"
		"left-sidebar content";
}

#wrapper > .left-sidebar {
	/* your properties here */
}
#wrapper > .content {
	/* your properties here */
}

#danger > .left-sidebar {
	/* your properties here */
}
#danger > .content {
	/* your properties here */
}

#nogo > .left-sidebar {
	/* your properties here */
}
#nogo > .content {
	/* your properties here */
}

#legacy > .left-sidebar {
	/* your properties here */
}
#legacy > .content {
	/* your properties here */
}

I haven’ tried the method of making classes into IDs… it seems too complicated…?
I used the second option (single grid rule) which was a great solution.
Thank you, TheMadExile. You get the point for providing a solution!