🎨 Imported styles from codepen, addef'ns

_site/css/base.css

@@ -1,5 +1,9 @@
 @charset "UTF-8";
 @import url("https://use.typekit.net/qlo3dpu.css");
+:root {
+  --auto-grid-min-size: 32rem;
+}
+
 body {
   font-family: monotype-grotesque, "Lucida Sans", sans-serif;
   font-size: 20px;
@@ -10,7 +14,7 @@ h1 {
   font-weight: 700;
 }
 
-h2, h3 {
+.subtitle {
   font-family: monotype-grotesque-extended, Arial Black, sans-serif;
   font-weight: 400;
   letter-spacing: 0.1;
@@ -37,6 +41,14 @@ li.subterm:before {
   padding-right: 5px;
 }
 
+.grid {
+  display: grid;
+  grid-template-columns: repeat(4, [col] 1fr [col]);
+  grid-template-rows: fit-content, fit-content, auto;
+  grid-row-gap: 10rem;
+  grid-column-gap: 4rem;
+}
+
 .auto-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
@@ -152,6 +164,78 @@ p {
   font-style: italic;
 }
 
+.word__title {
+  font-family: orpheuspro, Palatino, Times, serif;
+  font-weight: 900;
+  font-size: 2.5rem;
+  line-height: 1.25;
+}
+.word__definition {
+  font-family: monotype-grotesque, "Lucida Sans", sans-serif;
+  font-size: 1.5rem;
+}
+.word__speech {
+  font-size: 0.5em;
+  font-family: monotype-grotesque, "Lucida Sans", sans-serif;
+}
+.word__signal {
+  border-top: 1px solid currentcolor;
+  display: inline-block;
+  font-family: monotype-grotesque-extended, Arial Black, sans-serif;
+  text-transform: uppercase;
+  font-size: 0.75rem;
+  letter-spacing: 0.15rem;
+  padding: 0.5rem 0.75rem;
+}
+.word__link {
+  text-decoration: none;
+  color: black;
+  border-bottom: darkgrey solid 0.1em;
+  font-family: monotype-grotesque-extended, Arial Black, sans-serif;
+}
+.word__avoid {
+  color: red;
+}
+.word__avoid:before {
+  content: "🚨";
+  margin-left: -2.15rem;
+}
+.word__better {
+  color: green;
+}
+.word__better:before {
+  content: "👍";
+  margin-left: -2.15rem;
+}
+
+.block__dictionary {
+  max-width: 50rem;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0 1rem;
+}
+
+.auto-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
+  grid-gap: 1rem;
+}
+
+.block__word {
+  display: flex;
+  flex-direction: column;
+  margin: 1rem;
+}
+
+p {
+  margin: 0.75rem 0;
+  font-size: 1.25rem;
+}
+
+.style__italics {
+  font-style: italic;
+}
+
 .word__title {
   font-family: orpheuspro, Palatino, Times, serif;
   font-weight: 900;
@@ -190,4 +274,31 @@ p {
   margin-left: -2.15rem;
 }
 
+.word__issue {
+  text-align: right;
+  padding-right: 1rem;
+  font-family: monotype-grotesque-condensed, Arial Narrow, sans-serif;
+  font-size: 0.85rem;
+  text-transform: uppercase;
+}
+
+.word__link {
+  text-decoration: none;
+  color: black;
+  border-bottom: darkgrey solid 0.1em;
+  font-family: monotype-grotesque-extended, Arial Black, sans-serif;
+}
+
+.block__issue {
+  display: grid;
+  grid-template-columns: 1fr 4fr;
+  align-items: baseline;
+}
+
+.word__breakdown {
+  font-family: monotype-grotesque, "Lucida Sans", sans-serif;
+  border-left: 0.1rem solid lightgrey;
+  padding-left: 1rem;
+}
+
 /*# sourceMappingURL=base.css.map */

_site/css/base.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/base.scss"],"names":[],"mappings":";AACU;AA2BV;EACE,aAZa;EAab;;;AAGF;EACE,aAfW;EAgBX,aATO;;;AAYT;EACE,aApBW;EAqBX,aAhBU;EAiBV;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AACA;EACA;;AAGA;EACA;;AAGA;EACA;EACA;;;AAMF;EACE;EACA;EACA;;;AAKF;EAEE;IACA;;;EAGA;IACA;;;EAGA;IACA;;;EAGA;IACE;IACA;;;EAGF;IACE;;;EAGF;IACE;;;AAIJ;EACE;IACA;;;EAGA;IACE;;;EAGF;IACE;IACA;;;EAGF;IACA;IACA;;;EAGA;IACE;IACA;;;EAGF;IACA;;;EAGA;IACE;;;EAGF;IACE;;;AAIJ;EACE;;;AAGF;EAEE;IACE;IACA;;;EAGD;IACC;IACA;;;EAGD;IACC;IACA;;;EAGF;IACA;IACA;;;AAIF;EACE;EACA;EACA;EACA;;;AAKF;EACA;EACA;EACA;;;AAGA;EACA;EACA;;;AAGA;EACA;;;AAIE;EACA,aAjLQ;EAkLR;EACA;EACA;;AAGA;EACA,aAzLa;EA0Lb;;AAGA;EACA;EACA,aA/La;;AAkMb;EACA;EAEA;EACA,aApMW;EAqMX;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;;AAIJ;EACA;;AAEE;EACE;EACA","file":"base.css"}
+{"version":3,"sourceRoot":"","sources":["../scss/base.scss"],"names":[],"mappings":";AACU;AAIV;EACE;;;AA2BF;EACE,aAZa;EAab;;;AAGF;EACE,aAfW;EAgBX,aATO;;;AAYT;EACE,aApBW;EAqBX,aAhBU;EAiBV;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AACA;EACA;;AAGA;EACA;;AAGA;EACA;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAKF;EAEE;IACA;;;EAGA;IACA;;;EAGA;IACA;;;EAGA;IACE;IACA;;;EAGF;IACE;;;EAGF;IACE;;;AAIJ;EACE;IACA;;;EAGA;IACE;;;EAGF;IACE;IACA;;;EAGF;IACA;IACA;;;EAGA;IACE;IACA;;;EAGF;IACA;;;EAGA;IACE;;;EAGF;IACE;;;AAIJ;EACE;;;AAGF;EAEE;IACE;IACA;;;EAGD;IACC;IACA;;;EAGD;IACC;IACA;;;EAGF;IACA;IACA;;;AAIF;EACE;EACA;EACA;EACA;;;AAGF;EACA;EACA;EACA;;;AAGA;EACA;EACA;;;AAGA;EACA;;;AAIE;EACA,aAvLQ;EAwLR;EACA;EACA;;AAGA;EACA,aA/La;EAgMb;;AAGA;EACA;EACA,aArMa;;AAwMb;EACA;EAEA;EACA,aA1MW;EA2MX;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA,aArNS;;AAwNX;EACE;;AAEA;EACE;EACA;;AAIJ;EACA;;AAEE;EACE;EACA;;;AAKN;EACE;EACA;EACA;EACA;;;AAGF;EACA;EACA;EACA;;;AAGA;EACA;EACA;EACA;;;AAGA;EACA;EACA;;;AAGA;EACA;;;AAIA;EACA,aA1QU;EA2QV;EACA;EACA;;AAGA;EACA,aAlRe;EAmRf;;AAGA;EACA;EACA,aAxRe;;AA2Rf;EACA;EAEA;EACA,aA7Ra;EA8Rb;EACA;EACA;EACA;;AAEE;EACE;;AAEA;EACE;EACA;;AAIJ;EACA;;AAEA;EACE;EACA;;;AAMJ;EACA;EACA;EACA,aAzTa;EA0Tb;EACA;;;AAGA;EACA;EACA;EACA;EACA,aAnUa;;;AAsUb;EACE;EACA;EACA;;;AAIF;EACA,aAhVe;EAiVf;EACA","file":"base.css"}

_site/index.html

@@ -9,18 +9,19 @@
     <link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
 </head>
 <body>
-<main class="grid">
-	<div class="item" id="title">
+<main>
+	<section id="title" class="grid">
 		<h1>Self-Defined</h1>
-		<h2>A modern dictionary about us. We define our words, but they don't define us.</h2>
-		<p>For now, this stands as a list only, from which you can self-educate.
+		<p>
+		<span class="subtitle">A modern dictionary about us. We define our words, but they don't define us.</span><br/>For now, this stands as a list only, from which you can self-educate.
 Future phases will include definitions and resources.</p>
-		<h3>Participate</h3>
-		<p>Send unlisted words to or chat about volunteering to help: <a href="http://www.twitter.com/tatianatmac" target="_blank">@tatianatmac on Twitter</a>.</p>	
-	</div>
-
-	<div class="list">
-	List of Term
+		<p>
+		<span class="subtitle">Participate</span><br/>
+		Send unlisted words to or chat about volunteering to help: <a href="http://www.twitter.com/tatianatmac" target="_blank">@tatianatmac on Twitter</a>.</p>	
+	</section>
+<div class="grid">
+	<section class="list">
+		<h3>A-E</h3>
 		<ul>
 			<li>Ablelism</li>
 			<li>American</li>
@@ -80,12 +81,18 @@ Future phases will include definitions and resources.</p>
 			<li>Egalitarian</li>
 			<li>Empathy</li>
 			<li>enby</li>
+			<li><a href="#esl" class="word__link">English as a Second Language (ESL)</a></li>
 			<li>Entitlement</li>
 			<li>Equality</li>
 			<li>Equity</li>
 			<li>Fem</li>
 			<li>Femme</li>
 			<li>Ethnicity</li>
+			</ul>
+		</section>
+		<section class="list">
+			<h3>F-L</h3>
+			<ul>
 			<li>Gender</li>
 			<li class="subterm">Cis</li>
 			<li class="subterm">-Fluid</li>
@@ -121,117 +128,278 @@ Future phases will include definitions and resources.</p>
 			<li>Jihad</li>
 			<li>Latinx</li>
 		</ul>
-</div>
-<div class="list">
-	<ul>
-		<li>Marginalized</li>
-		<li>Matriarchy</li>
-		<li>Medication sensitive</li>
-		<li>Militarization</li>
-		<li>Minority</li>
-		<li>Misogynoir</li>
-		<li>Neurodivergent</li>
-		<li>Neurotypical</li>
-		<li>non binary</li>
-		<li>-Normative</li>
-		<li class="subterm">cis</li>
-		<li class="subterm">hetero</li>
-		<li>Oppression</li>
-		<li class="subterm">Internalized</li>
-		<li>Other specified feeding or eating disorders (OSFED)</li>
-		<li>Panic attacks</li>
-		<li>Pansexual</li>
-		<li>-passing</li>
-		<li class="subterm">female-</li>
-		<li class="subterm">male-</li>
-		<li class="subterm">white-</li>
-		<li>Parachuting</li>
-		<li>Patriarchy</li>
-		<li>Performative allyship</li>
-		<li>People of Color (PoC)</li>
-		<li>People with disabilities</li>
-		<li>-phile</li>		
-		<li class="subterm">andro</li>
-		<li class="subterm">gyne</li>		
-		<li>Platonic</li>
-		<li class="subterm">Queer</li>
-		<li>Polyamory</li>
-		<li>Positivism</li>
-		<li>Post-Traumatic Stress Disorder</li> 
-		<li>power</li>
-		<li>Poz</li>
-		<li>Prejudice</li>
-		<li>Pride</li>
-		<li>Pride, First (Anti-Police Riots)</li>
+	</section>
 
-		<li>Prophylaxis</li>
-		<li class="subterm">Pre-exposure (PreEP)</li>
-		<li class="subterm">Post-exposure (PEP)</li>
-		<li>Privilege</li>
-		<li class="subterm">Cis</li>
-		<li class="subterm">Monosexual</li>
-		<li class="subterm">White</li>
+	<section class="list">
+	<h3>M-S</h3>
+		<ul>
+			<li>Marginalized</li>
+			<li>Matriarchy</li>
+			<li>Medication sensitive</li>
+			<li>Militarization</li>
+			<li><a class="word__link" href=#minorities>Minorities</a></li>
+			<li><a class="word__link" href="#minoritised">Minoritised</a></li>
+			<li>Misogynoir</li>
+			<li>Neurodivergent</li>
+			<li>Neurotypical</li>
+			<li>non binary</li>
+			<li>-Normative</li>
+			<li class="subterm">cis</li>
+			<li class="subterm">hetero</li>
+			<li>Oppression</li>
+			<li class="subterm">Internalized</li>
+			<li>Other specified feeding or eating disorders (OSFED)</li>
+			<li>Panic attacks</li>
+			<li>Pansexual</li>
+			<li>-passing</li>
+			<li class="subterm">female-</li>
+			<li class="subterm">male-</li>
+			<li class="subterm">white-</li>
+			<li>Parachuting</li>
+			<li>Patriarchy</li>
+			<li>Performative allyship</li>
+			<li>People of Color (PoC)</li>
+			<li>People with disabilities</li>
+			<li>-phile</li>		
+			<li class="subterm">andro</li>
+			<li class="subterm">gyne</li>		
+			<li>Platonic</li>
+			<li class="subterm">Queer</li>
+			<li>Polyamory</li>
+			<li>Positivism</li>
+			<li>Post-Traumatic Stress Disorder</li> 
+			<li>power</li>
+			<li>Poz</li>
+			<li>Prejudice</li>
+			<li>Pride</li>
+			<li>Pride, First (Anti-Police Riots)</li>
 
-		<li>Race</li>
-		<li class="subterm">Racial</li>
-		<li class="subterm">Contract</li>
-		<li class="subterm">Formation</li>
-		<li class="subterm">State</li>
-		<li class="subterm">Raciology</li>
-		<li>Racism</li>
-		<li>Racist</li>
-		<li>Savior</li>
-		<li class="subterm">White</li>
-		<li>Semitic</li>
-		<li>Serodiscordant</li>
-		<li>settler</li>
-		<li class="subterm">colonial mentality</li>
-		<li>Sexual</li>
-		<li class="subterm"> assault of a minor</li>
-		<li class="subterm"> orientation</li>
-		<li>Socially constructed</li>
-		<li>Solidarity</li>
-		<li>-Splaining</li>
-		<li class="subterm">cis</li>
-		<li class="subterm">man</li>
-		<li class="subterm">white</li>
-		<li>Spirit animal</li>
-		<li>Systematic</li>
-		<li>Systemic</li>
-		<li>Top-down approach</li>
-		<li>Totemic animal</li>
-		<li>Tawhid</li>
-		<li>Trans Exclusionary Radical Feminist (TERF)</li>
-		<li>Trans</li>
-		<li class="subterm">gender</li>
-		<li class="subterm">man</li>
-		<li class="subterm">masculine</li>	
-		<li class="subterm">phobia</li>
-		<li class="subterm">woman</li>
-		<li>Tribe</li>
-		<li>Triggers</li>
-		<li>Two-spirited</li>
-		<li>Undetectable=Untransmittable (U=U)</li>
-		<li>Undetectable</li>
-		<li>Unqueer</li>
-		<li>Indigenous</li>
-		<li>Vertigo</li>
-		<li class="subterm">Visual</li>
-		<li>Vestibular migraine</li>
-		<li>Violence against women and girls (VAWG)</li>
-		<li>Viral Load</li>
-		<li>White</li>
-		<li class="subterm">feminism</li>
-		<li class="subterm"> fragility</li>
-		<li class="subterm">-ness</li>	
-		<li class="subterm"> supremacy</li>
-		<li class="subterm"> woman tears</li>
-		<li class="subterm"> people (WP)</li>
-		<li class="subterm"> women (WW)</li>
-		<li>White supremacist capitalist patriarchy</li>
-		<li>womanism</li>
-	</ul>
-</div>
+			<li>Prophylaxis</li>
+			<li class="subterm">Pre-exposure (PreEP)</li>
+			<li class="subterm">Post-exposure (PEP)</li>
+			<li>Privilege</li>
+			<li class="subterm">Cis</li>
+			<li class="subterm">Monosexual</li>
+			<li class="subterm">White</li>
+
+			<li>Race</li>
+			<li class="subterm">Racial</li>
+			<li class="subterm">Contract</li>
+			<li class="subterm">Formation</li>
+			<li class="subterm">State</li>
+			<li class="subterm">Raciology</li>
+			<li>Racism</li>
+			<li>Racist</li>
+			<li>Savior</li>
+			<li class="subterm">White</li>
+			<li>Semitic</li>
+			<li>Serodiscordant</li>
+			<li>settler</li>
+			<li class="subterm">colonial mentality</li>
+			<li>Sexual</li>
+			<li class="subterm"> assault of a minor</li>
+			<li class="subterm"> orientation</li>
+			<li>Socially constructed</li>
+			<li>Solidarity</li>
+			<li>-Splaining</li>
+			<li class="subterm">cis</li>
+			<li class="subterm">man</li>
+			<li class="subterm">white</li>
+			<li>Spirit animal</li>
+			<li>Systematic</li>
+			<li>Systemic</li>
+		</ul>	
+	</section>
+		
+	<section class="list">
+			<h3>T-Z</h3>
+			<ul>
+				<li>Top-down approach</li>
+				<li>Totemic animal</li>
+				<li>Tawhid</li>
+				<li>Trans Exclusionary Radical Feminist (TERF)</li>
+				<li>Trans</li>
+				<li class="subterm">gender</li>
+				<li class="subterm">man</li>
+				<li class="subterm">masculine</li>	
+				<li class="subterm">phobia</li>
+				<li class="subterm">woman</li>
+				<li>Tribe</li>
+				<li>Triggers</li>
+				<li>Two-spirited</li>
+				<li>Undetectable=Untransmittable (U=U)</li>
+				<li>Undetectable</li>
+				<li>Unqueer</li>
+				<li>Indigenous</li>
+				<li>Vertigo</li>
+				<li class="subterm">Visual</li>
+				<li>Vestibular migraine</li>
+				<li>Violence against women and girls (VAWG)</li>
+				<li>Viral Load</li>
+				<li>White</li>
+				<li class="subterm">feminism</li>
+				<li class="subterm"> fragility</li>
+				<li class="subterm">-ness</li>	
+				<li class="subterm"> supremacy</li>
+				<li class="subterm"> woman tears</li>
+				<li class="subterm"> people (WP)</li>
+				<li class="subterm"> women (WW)</li>
+				<li>White supremacist capitalist patriarchy</li>
+				<li>womanism</li>
+				<li><a class="word__link" href="#women-poc">Women and people of colour</a></li>
+			</ul>
+	</section>
+	</div>
+<div class="auto-grid">
+	<section class="block__word list">
+			<p class="word__signal word__signal__avoid">
+				avoid
+			</p>
+	
+			<p class="word__title" id="minorities">
+					minorities
+				<span class="word__speech">
+						noun
+				</span>
+			</p>
+			
+			<p class="word__definition">
+			the smaller in number of two groups constituting a whole 
+			</p>
+			<div class="block__issue">
+				<p class="word__issue">
+					Issues
+				</p>
+				<p class="word__breakdown"> Minorities is not always accurate. As it deals with numbers, often the insinuation of racial minorities is inaccurate, as communities of colour often outnumber white communities.</p>
+			</div>
+			<div class="block__issue">
+				<p class="word__issue">
+					Impact
+				</p>
+				<p class="word__breakdown">By repeatedly referring to groups as "minorities," they are being infantised and made to feel minor.</p>
+			</div>
+			
+			<div class="block__issue">
+				<p class="word__issue">
+					Alt Words
+				</p>
+				<p class="word__breakdown">
+			<span class="word__alt">
+					<a class="word__link" href="#minoritised">minoritised</a>, or omit
+					</span></p>
+		</section>
+			
+				<section class="block__word list">
+			<p class="word__signal word__signal__better">
+				Better Alternate
+			</p>
+	
+			<p id="minoritised" class="word__title">
+					minoritised
+				<span class="word__speech">
+						adj
+				</span>
+			</p>
+			
+			<p class="word__definition">
+			groups resulting from social constructs have grant less power or representation compared to other members or groups in society
+			</p>
+			<div class="block__issue">
+				<p class="word__issue">
+					Benefits
+				</p>
+				<p class="word__breakdown"> Minoritised places the emphasis on the power struggle, and on the systemic issues at play. It's also an adjective, which requires you to add "group" or "people" so it's people-first language</p>
+			</div>
+			<div class="block__issue">
+				<p class="word__issue">
+					Impact
+				</p>
+				<p class="word__breakdown">It removes the pejorative nature of "minorities".</p>
+			</div>
+			
+			<div class="block__issue">
+				<p class="word__issue">
+					Alt Words
+				</p>
+				<p class="word__breakdown">
+			<span class="word__alt">
+					<a class="word__link" href="#minorities">minorities</a>, or omit
+					</span></p>
+		</section>
+		<section class="block__word list">
+			<p class="word__signal word__signal__avoid">
+				avoid
+			</p>
+	
+			<p id="esl" class="word__title">
+					English as second language (ESL)
+				<span class="word__speech">
+						noun
+				</span>
+			</p>
+			
+			<p class="word__definition">
+			the teaching of English to people who speak a different language and who live in a country where English is the main language spoken
+			</p>
+			<div class="block__issue">
+				<p class="word__issue">
+					Issues
+				</p>
+				<p class="word__breakdown"> Monolinguist, English-only speakers often refer to people who don't speak English natively as "ESL" or say they are learning a "second language". More often than not, this is not true, as many people are multi-lingual with 3 or more languages</p>
+			</div>
+			<div class="block__issue">
+				<p class="word__issue">
+					Impact
+				</p>
+				<p class="word__breakdown">It makes false assumptions about English learners, centres English as the "default" or "expected" first language, ignoring that many people learn multiple (&gt;3), non-English languages first.</p>
+			</div>
+			
+			<div class="block__issue">
+				<p class="word__issue">
+					Alt Words
+				</p>
+				<p class="word__breakdown">
+			<span class="word__alt">
+				<a class="word__link" href="#">English as learning-language (ELL)</a>, or <a class="word__link" href="#">non-native</a>, or omit (because do you really know, for sure?)
+					</span></p>
+		</section>
+		<section class="block__word list">
+			<p class="word__signal word__signal__avoid">
+				avoid
+			</p>
+	
+			<p id="women-poc" class="word__title">
+					women and people of colour
+				<span class="word__speech">
+						noun
+				</span>
+			</p>
+			
+			<p class="word__definition">
+			often used as a phrase to encompass "non-white, non-men," seeking to provide solidarity for these two groups
+			</p>
+			<div class="block__issue">
+				<p class="word__issue">
+					Issues
+				</p>
+				<p class="word__breakdown">What happens to women of colour? As a woman of colour, I am split between both women and people of colour.</p>
+			</div>
+			<div class="block__issue">
+				<p class="word__issue">
+					Impact
+				</p>
+				<p class="word__breakdown">As such, it elicits feelings of erasure for women of colour. It also neglects non-binary individuals.</p>
+			</div>
+			
+			<div class="block__issue">
+				<p class="word__issue">
+					Alt Words
+				</p>
+				<p class="word__breakdown">
+			<span class="word__alt">
+				<a class="word__link" href="#">people of colour and white women </a> or <a class="word__link" href="#">people of colour, white non-binary people, and white women</a>, find ways to reframe why this dynamic exists, or omit</span></p>
+		</section>
+	</div>
 </main>
 </body>
 </html>

_site/scss/base.scss

@@ -2,6 +2,11 @@
   @import url("https://use.typekit.net/qlo3dpu.css");
 
 // COLORS //
+
+:root {
+  --auto-grid-min-size: 32rem;
+}
+
   $primary-color: #0e4bff; //cobalt blue is so pretty//
   $secondary-color: #F3F315; //
 
@@ -36,7 +41,7 @@ h1 {
   font-weight: $bold;
 }
 
-h2, h3 {
+.subtitle {
   font-family: $ext-sans;
   font-weight: $regular;
   letter-spacing: .1;
@@ -67,6 +72,14 @@ li {
 
   // GRID //
 
+.grid {
+  display: grid;
+  grid-template-columns: repeat(4, [col] 1fr [col]);
+  grid-template-rows: fit-content, fit-content, auto;
+  grid-row-gap: 10rem;
+  grid-column-gap: 4rem;
+}
+
 .auto-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
@@ -174,8 +187,6 @@ li {
   padding: 0 1rem;
 }
 
-
-
 .block__word {
 display: flex;
 flex-direction: column;
@@ -218,6 +229,14 @@ font-style: italic;
   font-size: .75rem;
   letter-spacing: .15rem;
   padding: .5rem .75rem;
+  }
+
+  &__link {
+    text-decoration: none;
+    color: black;
+    border-bottom: darkgrey solid .1em;
+    font-family: $ext-sans;
+  }
   
   &__avoid {
     color: red;
@@ -237,4 +256,107 @@ font-style: italic;
       }
   }
 }
+
+.block__dictionary {
+  max-width: 50rem;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0 1rem;
+}
+
+.auto-grid {
+display: grid;
+grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
+grid-gap: 1rem; 
+  }
+
+.block__word {
+display: flex;
+flex-direction: column;
+margin: 1rem;
+}
+
+p {
+margin: .75rem 0;
+font-size: 1.25rem;
+}
+
+.style__italics {
+font-style: italic;
+}
+
+.word {
+&__title {
+font-family: $serif;
+font-weight: 900;
+font-size: 2.5rem;
+line-height: 1.25;
+}
+
+&__definition {
+font-family: $sans-serif;
+font-size: 1.5rem;
+}
+
+&__speech {
+font-size: .5em;
+font-family: $sans-serif;
+}
+
+&__signal {
+border-top: 1px solid currentcolor;
+// border-radius: 100px;
+display: inline-block;
+font-family: $ext-sans;
+text-transform: uppercase;
+font-size: .75rem;
+letter-spacing: .15rem;
+padding: .5rem .75rem;
+  
+  &__avoid {
+    color: red;
+    
+    &:before {
+      content: "🚨";
+      margin-left: -2.15rem;
+    }
+  }
+  
+  &__better {
+  color: green;
+    
+  &:before  {
+    content: "👍";
+    margin-left: -2.15rem;
+    }
+  }
+}
+}
+
+.word__issue {
+text-align: right;
+padding-right: 1rem;
+font-family: $con-sans;
+font-size: .85rem;
+text-transform: uppercase;
+}
+
+.word__link {
+text-decoration: none;
+color: black;
+border-bottom: darkgrey solid .1em;
+font-family: $ext-sans;
+}
+
+.block__issue {
+  display: grid;
+  grid-template-columns: 1fr 4fr;
+  align-items: baseline;
+
+}
+
+.word__breakdown {
+font-family: $sans-serif;
+border-left: .1rem solid lightgrey;
+padding-left: 1rem;
 }