--- /dev/null
+/**
+ * @file
+ * This file is used to style the 'highlighted-top' view mode.
+ */
+
+.node--view-mode-highlighted-top {
+ border: 1px solid #fcece7;
+ width: 100%;
+}
+
+/* Tweaks to the layout when promoted */
+/* Custom */
+@media screen and (min-width: 40rem) { /* 640px */
+ .view-promoted-items--single .node--view-mode-highlighted-top {
+ display: flex;
+ }
+}
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ .view-promoted-items--single .node--view-mode-highlighted-top {
+ flex-direction: column;
+ }
+}
+
+/* Custom */
+@media screen and (min-width: 40rem) { /* 640px */
+ .view-promoted-items--single .node--view-mode-highlighted-top .node__content {
+ flex: 1 0 50%;
+ }
+}
+
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ .view-promoted-items--single .node--view-mode-highlighted-top .node__meta {
+ order: -1;
+ }
+}
+
+.node--view-mode-highlighted-top .node__meta {
+ padding: 1.5rem;
+}
+
+.node--view-mode-highlighted-top .node__title {
+ font-weight: normal;
+ margin-bottom: 1rem;
+}
+
+.node--view-mode-highlighted-top .field--name-title {
+ font-family: 'Scope One', Georgia, serif;
+ font-size: 1.424rem;
+ font-weight: 400;
+}
+
+.node--view-mode-highlighted-top .node__title .node__link {
+ color: #000;
+ text-decoration: none;
+ background-color: inherit;
+}
+
+.node--view-mode-highlighted-top .node__title .node__link:focus,
+.node--view-mode-highlighted-top .node__title .node__link:hover {
+ color: #000;
+ text-decoration: underline;
+}
+
+.node--view-mode-highlighted-top .node__link .field--name-title {
+ color: #000;
+ text-decoration: none;
+}
+
+.node--view-mode-highlighted-top .field--name-field-image img {
+ display: block;
+ width: 100%;
+}
+
+.node--view-mode-highlighted-top .field--name-field-difficulty {
+ color: #5f635d;
+ font-size: 0.889rem;
+ margin-bottom: 0.5rem;
+}