[Card] Adjusted styles for media--date (#936)

* Adjusted styles for media--date.

* Switched to flex-basis to make it easier to apply element-invisible class.

* Switched to flex-basis: auto and moved no-crop styles under left/right alignment.

src/scss/components/card.scss

@@ -139,27 +139,6 @@
       margin-left: auto;
       margin-right: auto;
     }
-
-    &.media--no-crop {
-      &.media--small,
-      &.media--medium,
-      &.media--large {
-        display: block;
-      }
-
-      // TODO: Change these to decided upon sizes.
-      &.media--small {
-        max-width: 13.625rem;
-      }
-
-      &.media--medium {
-        max-width: 27.25rem;
-      }
-
-      &.media--large {
-        max-width: 40.875rem;
-      }
-    }
   }
 
   // Allows the media to run edge to edge for stacked cards.
@@ -192,7 +171,7 @@
   }
 
   .media--no-crop {
-    display: contents;
+    flex-basis: auto;
 
     // TODO: add borders, padding, etc.
   }
@@ -213,9 +192,8 @@
 
   .media--date {
     position: relative;
-    color: $white;
-    background-color: $uiowa-black;
     padding-top: $gutter;
+    border: 1px solid $uiowa-gold;
     text-align: center;
     width: 6rem;
     height: 6rem;
@@ -242,10 +220,9 @@
     }
   }
   // We should revisit to have appropriate color/styling for each background color option.
-  &:not([class*="bg--gold"]){
+  &[class*="bg--gold"]{
     .media--date {
-      color: $uiowa-black;
-      background-color: $uiowa-gold;
+      border: 1px solid $uiowa-black;
     }
   }
 }
@@ -394,6 +371,27 @@
     }
   }
 
+  .media--no-crop {
+    &.media--small,
+    &.media--medium,
+    &.media--large {
+      display: block;
+    }
+
+    // TODO: Change these to decided upon sizes.
+    &.media--small {
+      max-width: 13.625rem;
+    }
+
+    &.media--medium {
+      max-width: 27.25rem;
+    }
+
+    &.media--large {
+      max-width: 40.875rem;
+    }
+  }
+
   .media--small.media--circle {
     max-width: 11.375rem;
   }