Cacher is the code snippet organizer for pro developers

$rhino: hsla (208, 38%, 25%, 1);
$thunder: hsla(312, 15%, 13%, 1);
$coral-red: hsla(0, 100%, 63%, 1);
$burnt-umber: hsla(0, 53%, 36%, 1);
$parchment: hsla(29, 53%, 89%, 1);

$boulder: hsla(0, 3%, 48%, 1);

html {
	color: $parchment;
	font-family: "Poppins", sans-serif;
	background-color: $boulder;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Bitter", serif;
}
.grid1 {
	display: grid;
	border: 3px solid $coral-red;
	padding: 10% 20%;
	background-color: $thunder;
	//background-color: rgba(130, 230, 30, 1);
}

.grid2 {
	display: grid;
}

.grid2 > div {
	text-align: center;
	border: 0.25px solid $burnt-umber;
	background-color: green;
	text-transform: uppercase;
	padding: 20px 0;
}

<div class="grid1">
	<div class="grid2">
		<div class="alpha">
		 	alpha
		</div>
		
		<div class="bravo">
			bravo	
		</div>
		
		<div class="charlie">
			charlie	
		</div>
		
		<div class="delta">
			delta	
		</div>
		
		<div class="echo">
			echo
		</div>
		
		<div class="foxtrot">
			foxtrot
		</div>
		
		<div class="golf">
			golf
		</div>
		
		<div class="hotel">
			hotel
		</div>
		
		<div class="india">
			india
		</div>
		
		<div class="julia">
			julia
		</div>
		
		<div class="kilo">
			kilo
		</div>
		
		<div class="lima">
			lima
		</div>
		
		<div class="mike">
			mike
		</div>
		
		<div class="november">
			november
		</div>
		
		<div class="oscar">
			oscar	
		</div>
		
		<div class="papa">
			papa
		</div>
		
		<div class="quebec">
			quebec
		</div>
		
		<div class="romeo">
			romeo
		</div>
		
		<div class="sierra">
			sierra
		</div>
		
		<div class="tango">
			tango
		</div>
		
		<div class="uniform">
			uniform
		</div>
		
		<div class="victor">
			 victor
		</div>
		
		<div class="whiskey">
			whiskey
		</div>
		
		<div class="x-ray">
			x-ray
		</div>
		
		<div class="yankee">
			yankee
		</div>
		
		<div class="zulu">
			zulu
		</div>

</div>