Align warning icon outside main text flow

Some other minor adjustments to CSS for legibility and BEM conformance
also included in this changeset.

client/common/sass/directory/_instance-alert.sass

@@ -7,16 +7,19 @@ $color: #9292A5
 
 .instance-alert
 	padding:  $alert-padding-y $alert-padding-x
-	padding-left: $icon-width + $icon-gutter + $alert-padding-x
 	border-radius: 4px
 
-.instance-alert-moderate
-	color: #BAA400
+.instance-alert
+	+media-breakpoint-down(extra-small)
+		padding-left: ($icon-width/2) + $icon-gutter
+
+.instance-alert--moderate
+	color: darken(#BAA400, 10%)
 	a
-		color: #BAA400
+		color: darken(#BAA400, 10%)
 		font-weight: bold
 
-.instance-alert-severe
+.instance-alert--severe
 	color: $red
 	a
 		color: $red
@@ -28,6 +31,11 @@ $color: #9292A5
 	width: $icon-width
 	height: auto
 
+.instance-alert__icon
+	+media-breakpoint-down(extra-small)
+		margin-left: - ($icon-width/2) - $icon-gutter
+		width: $icon-width / 2
+
 .instance-alert__title
 	color: darken($color, 30%)
 	font-size: inherit

client/common/sass/directory/_instance-instructions.sass

@@ -62,7 +62,7 @@
 			fill: $red2
 
 		&-text--warning, &-url--warning
-			color: #BAA400
+			color: darken(#BAA400, 10%)
 		&--warning
 			+button-small
 			border: 1px solid #BAA400

directory/templates/directory/_instance_instructions.html

@@ -46,7 +46,7 @@ <h1 class="instance-instructions__title">{% trans "Planning to submit informatio
 	</p>
 
 	{% if show_warnings %}
-		<div class="instance-alert instance-alert-{{ warning_level }}">
+		<div class="instance-alert instance-alert--{{ warning_level }}">
 			{% if warning_level == "moderate" %}
 				{% include "common/_svg.html" with class="instance-alert__icon" svg="images/instance-status/Warning.svg" img="images/instance-status/Warning.png" alt="Moderate Warning Icon" %}
 			{% elif warning_level == 'severe' %}