From d5f4fb3190911add1961e73e1e4266a961779c36 Mon Sep 17 00:00:00 2001
From: reverend <reverend@reverend2048.de>
Date: Tue, 29 Dec 2020 19:11:14 +0100
Subject: [PATCH] Adapted menu component

---
 components/05_Components/menu/_menu.scss |   1 +
 public/rcss.css                          | 963 +++++++++++++++++++----
 2 files changed, 795 insertions(+), 169 deletions(-)

diff --git a/components/05_Components/menu/_menu.scss b/components/05_Components/menu/_menu.scss
index 0fb06cb..b6c4cd0 100644
--- a/components/05_Components/menu/_menu.scss
+++ b/components/05_Components/menu/_menu.scss
@@ -7,6 +7,7 @@
 
     &--horizontal &__List {
         @include RV-FlexRow__Container--horizontal;
+        @include RV-FlexRow__Container--breakPoint;
     }
 
     &--spaced &__List {
diff --git a/public/rcss.css b/public/rcss.css
index 441049c..e7ac622 100644
--- a/public/rcss.css
+++ b/public/rcss.css
@@ -1,71 +1,122 @@
 @import url(./pink.css);
-.RV-Alignment__Container {
+.RV-Alignment {
   display: grid; }
-  .RV-Alignment__Container--top {
+  .RV-Alignment--top {
     display: grid;
     align-content: start; }
-  .RV-Alignment__Container--bottom {
+  .RV-Alignment--bottom {
     display: grid;
     align-content: end; }
-  .RV-Alignment__Container--left {
+  .RV-Alignment--left {
     display: grid;
     justify-content: start; }
-  .RV-Alignment__Container--right {
+  .RV-Alignment--right {
     display: grid;
     justify-content: end; }
-  .RV-Alignment__Container--horizontalCenter {
+  .RV-Alignment--horizontalCenter {
     display: grid;
     justify-content: center; }
-  .RV-Alignment__Container--verticalCenter {
+  .RV-Alignment--verticalCenter {
     display: grid;
     align-items: center; }
-  .RV-Alignment__Container--center {
+  .RV-Alignment--center {
     display: grid;
     justify-content: center;
     display: grid;
     align-items: center; }
 
+/*
+ * Classes for easy flexrow usage
+ */
+/* ##########
+ * Container class
+  ########### */
+/*
+ * Orientation
+ */
+/*
+ * Breaks from row to column orientation at the given breakpoint
+ * breaks when the container is smaller than $-localBreakPoint or when the viewport is smaller than $-mediaBreakPoint.
+ */
+/*
+ * Flexbox behavior, Row is horizontal, but item are wraped individualy
+ */
+/*
+ * Shorthand for the modifiers above
+ */
+/* ##########
+ * Item class
+  ########### */
+/*
+ * Varios relative width of items to each other
+ */
+/*
+ * Item has always the given width
+ */
+/*
+ * Item width relativ to the container
+ */
+/*
+ * Shorthand for the modifiers above
+ */
+/*
+ * Combining basic classes
+ */
+/*
+ * Combining shorthands
+ */
+/*
+ * Final CSS Class
+ */
 .RV-FlexRow__Container {
   display: flex;
-  flex-direction: row;
   height: 100%; }
-  .RV-FlexRow__Container--multiRow {
-    flex-wrap: wrap; }
-  .RV-FlexRow__Container--column {
-    display: flex;
-    flex-direction: column; }
 
 .RV-FlexRow__Item {
-  min-width: min-content;
-  width: 100%; }
-  .RV-FlexRow__Item__Container {
-    display: grid; }
-    .RV-FlexRow__Item__Container--top {
-      display: grid;
-      align-content: start; }
-    .RV-FlexRow__Item__Container--bottom {
-      display: grid;
-      align-content: end; }
-    .RV-FlexRow__Item__Container--left {
-      display: grid;
-      justify-content: start; }
-    .RV-FlexRow__Item__Container--right {
-      display: grid;
-      justify-content: end; }
-    .RV-FlexRow__Item__Container--horizontalCenter {
-      display: grid;
-      justify-content: center; }
-    .RV-FlexRow__Item__Container--verticalCenter {
-      display: grid;
-      align-items: center; }
-    .RV-FlexRow__Item__Container--center {
-      display: grid;
-      justify-content: center;
-      display: grid;
-      align-items: center; }
-  .RV-FlexRow__Item, .RV-FlexRow__Item--normal {
-    flex-grow: 3;
-    flex-shrink: 3; }
+  flex-basis: max-content;
+  flex-grow: 3;
+  flex-shrink: 3; }
+
+.RV-FlexRow__Container--breakPoint {
+  flex-wrap: wrap; }
+  .RV-FlexRow__Container--breakPoint * {
+    flex-basis: calc(500px * 999 - 100% * 999); }
+
+.RV-FlexRow__Container--horizontal {
+  flex-direction: row; }
+
+.RV-FlexRow__Container--vertical {
+  flex-direction: column; }
+
+.RV-FlexRow__Container--auto {
+  flex-direction: row;
+  flex-wrap: wrap; }
+
+.RV-FlexRow__Item {
+  display: grid; }
+  .RV-FlexRow__Item--top {
+    display: grid;
+    align-content: start; }
+  .RV-FlexRow__Item--bottom {
+    display: grid;
+    align-content: end; }
+  .RV-FlexRow__Item--left {
+    display: grid;
+    justify-content: start; }
+  .RV-FlexRow__Item--right {
+    display: grid;
+    justify-content: end; }
+  .RV-FlexRow__Item--horizontalCenter {
+    display: grid;
+    justify-content: center; }
+  .RV-FlexRow__Item--verticalCenter {
+    display: grid;
+    align-items: center; }
+  .RV-FlexRow__Item--center {
+    display: grid;
+    justify-content: center;
+    display: grid;
+    align-items: center; }
   .RV-FlexRow__Item--narrower {
     flex-grow: 1;
     flex-shrink: 5; }
@@ -83,6 +134,26 @@
     flex-shrink: 0;
     width: min-content;
     flex-basis: 100px; }
+  .RV-FlexRow__Item--half {
+    flex-grow: 0;
+    flex-shrink: 0;
+    flex-basis: 50%;
+    width: 50%; }
+  .RV-FlexRow__Item--third {
+    flex-grow: 0;
+    flex-shrink: 0;
+    flex-basis: 33.33%;
+    width: 33.33%; }
+  .RV-FlexRow__Item--quarter {
+    flex-grow: 0;
+    flex-shrink: 0;
+    flex-basis: 25%;
+    width: 25%; }
+  .RV-FlexRow__Item--content {
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: max-content;
+    flex-basis: max-content; }
 
 .RV-FlexGrid__Container {
   display: grid;
@@ -90,55 +161,159 @@
   grid-template-rows: repeat(auto-fill, minmax(300px, 1fr));
   grid-auto-rows: minmax(300px, 1fr); }
 
-.RV-FlexGrid__Item__Container {
+.RV-FlexGrid__Item {
   display: grid; }
-  .RV-FlexGrid__Item__Container--top {
+  .RV-FlexGrid__Item--top {
     display: grid;
     align-content: start; }
-  .RV-FlexGrid__Item__Container--bottom {
+  .RV-FlexGrid__Item--bottom {
     display: grid;
     align-content: end; }
-  .RV-FlexGrid__Item__Container--left {
+  .RV-FlexGrid__Item--left {
     display: grid;
     justify-content: start; }
-  .RV-FlexGrid__Item__Container--right {
+  .RV-FlexGrid__Item--right {
     display: grid;
     justify-content: end; }
-  .RV-FlexGrid__Item__Container--horizontalCenter {
+  .RV-FlexGrid__Item--horizontalCenter {
     display: grid;
     justify-content: center; }
-  .RV-FlexGrid__Item__Container--verticalCenter {
+  .RV-FlexGrid__Item--verticalCenter {
     display: grid;
     align-items: center; }
-  .RV-FlexGrid__Item__Container--center {
+  .RV-FlexGrid__Item--center {
     display: grid;
     justify-content: center;
     display: grid;
     align-items: center; }
 
-.RV-ContentCrop__Container, .RV-ContentCrop__Container * {
-  overflow: hidden;
-  word-break: break-all; }
-
-.RV-ContentCrop__Container img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover; }
-
-.RV-ContentCrop__Container--left img {
-  object-position: left; }
-
-.RV-ContentCrop__Container--center img {
-  object-position: center; }
-
-.RV-ContentCrop__Container--top img {
-  object-position: top; }
-
-.RV-ContentCrop__Container--bottom img {
-  object-position: botom; }
-
-.RV-ContentCrop__Container--center img {
-  object-position: center; }
+.RV-ContentCrop {
+  display: block;
+  overflow: hidden; }
+  .RV-ContentCrop img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block; }
+  .RV-ContentCrop p {
+    overflow: hidden;
+    display: block;
+    text-overflow: ellipsis;
+    padding: 0;
+    margin: 0;
+    line-height: 1.21;
+    z-index: -20;
+    position: relative;
+    background-color: white;
+    height: 96.8%; }
+  .RV-ContentCrop--fade--fade:after {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0), white);
+    display: block;
+    content: ' ';
+    opacity: 0.8;
+    position: relative;
+    top: -25%;
+    width: 100%;
+    height: 25%;
+    z-index: -10; }
+  .RV-ContentCrop--ellipsis--ellipsis:after {
+    position: relative;
+    display: block;
+    bottom: 1.2em;
+    left: calc(100% - 3ch);
+    content: '...';
+    font-size: 1.2em;
+    min-width: 2em;
+    background-color: white;
+    padding: 0 2px; }
+  .RV-ContentCrop--square {
+    width: 100%;
+    padding-top: 100%;
+    position: relative; }
+    .RV-ContentCrop--square img,
+    .RV-ContentCrop--square div {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0; }
+  .RV-ContentCrop--circle {
+    width: 100%;
+    padding-top: 100%;
+    position: relative;
+    border-radius: 50%; }
+    .RV-ContentCrop--circle img,
+    .RV-ContentCrop--circle div {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0; }
+  .RV-ContentCrop--1to2 {
+    width: 100%;
+    padding-top: 200%;
+    position: relative; }
+    .RV-ContentCrop--1to2 img {
+      object-fit: cover;
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0; }
+  .RV-ContentCrop--2to1 {
+    width: 100%;
+    padding-top: 50%;
+    position: relative; }
+    .RV-ContentCrop--2to1 img {
+      object-fit: cover;
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0; }
+  .RV-ContentCrop--4to3 {
+    width: 100%;
+    padding-top: 75%;
+    position: relative; }
+    .RV-ContentCrop--4to3 img {
+      object-fit: cover;
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0; }
+  .RV-ContentCrop--16to9 {
+    width: 100%;
+    padding-top: 56.25%;
+    position: relative; }
+    .RV-ContentCrop--16to9 img {
+      object-fit: cover;
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0; }
+  .RV-ContentCrop--3to2 {
+    width: 100%;
+    padding-top: 66.66667%;
+    position: relative; }
+    .RV-ContentCrop--3to2 img {
+      object-fit: cover;
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0; }
+  .RV-ContentCrop--left img {
+    object-position: left; }
+  .RV-ContentCrop--center img {
+    object-position: center; }
+  .RV-ContentCrop--top img {
+    object-position: top; }
+  .RV-ContentCrop--bottom img {
+    object-position: bottom; }
+  .RV-ContentCrop--center img {
+    object-position: center; }
 
 .RV-Fan__Container--vertical {
   flex-direction: column;
@@ -163,7 +338,8 @@
   min-width: 320px;
   height: 280px; }
 
-.RV-Fan__Container--fullWidth .RV-Fan__Base, .RV-Fan__Container--fullWidth .RV-Fan__Surface {
+.RV-Fan__Container--fullWidth .RV-Fan__Base,
+.RV-Fan__Container--fullWidth .RV-Fan__Surface {
   flex-grow: 1; }
 
 .RV-Fan__Container {
@@ -174,42 +350,255 @@
   width: 320px;
   flex: 0 0 auto; }
 
-.RV-Fan__Surface, .RV-Fan__Surface * {
-  overflow: hidden;
-  word-break: break-all; }
-
-.RV-Fan__Surface img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover; }
-
-.RV-Fan__Surface--left img {
-  object-position: left; }
-
-.RV-Fan__Surface--center img {
-  object-position: center; }
-
-.RV-Fan__Surface--top img {
-  object-position: top; }
-
-.RV-Fan__Surface--bottom img {
-  object-position: botom; }
-
-.RV-Fan__Surface--center img {
-  object-position: center; }
+.RV-Fan__Surface {
+  display: block;
+  overflow: hidden; }
+  .RV-Fan__Surface img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block; }
+  .RV-Fan__Surface p {
+    overflow: hidden;
+    display: block;
+    text-overflow: ellipsis;
+    padding: 0;
+    margin: 0;
+    line-height: 1.21;
+    z-index: -20;
+    position: relative;
+    background-color: white;
+    height: 96.8%; }
+  .RV-Fan__Surface--fade--fade:after {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0), white);
+    display: block;
+    content: ' ';
+    opacity: 0.8;
+    position: relative;
+    top: -25%;
+    width: 100%;
+    height: 25%;
+    z-index: -10; }
+  .RV-Fan__Surface--ellipsis--ellipsis:after {
+    position: relative;
+    display: block;
+    bottom: 1.2em;
+    left: calc(100% - 3ch);
+    content: '...';
+    font-size: 1.2em;
+    min-width: 2em;
+    background-color: white;
+    padding: 0 2px; }
+  .RV-Fan__Surface--square {
+    width: 100%;
+    padding-top: 100%;
+    position: relative; }
+    .RV-Fan__Surface--square img,
+    .RV-Fan__Surface--square div {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0; }
+  .RV-Fan__Surface--circle {
+    width: 100%;
+    padding-top: 100%;
+    position: relative;
+    border-radius: 50%; }
+    .RV-Fan__Surface--circle img,
+    .RV-Fan__Surface--circle div {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0; }
+  .RV-Fan__Surface--1to2 {
+    width: 100%;
+    padding-top: 200%;
+    position: relative; }
+    .RV-Fan__Surface--1to2 img {
+      object-fit: cover;
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0; }
+  .RV-Fan__Surface--2to1 {
+    width: 100%;
+    padding-top: 50%;
+    position: relative; }
+    .RV-Fan__Surface--2to1 img {
+      object-fit: cover;
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0; }
+  .RV-Fan__Surface--4to3 {
+    width: 100%;
+    padding-top: 75%;
+    position: relative; }
+    .RV-Fan__Surface--4to3 img {
+      object-fit: cover;
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0; }
+  .RV-Fan__Surface--16to9 {
+    width: 100%;
+    padding-top: 56.25%;
+    position: relative; }
+    .RV-Fan__Surface--16to9 img {
+      object-fit: cover;
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0; }
+  .RV-Fan__Surface--3to2 {
+    width: 100%;
+    padding-top: 66.66667%;
+    position: relative; }
+    .RV-Fan__Surface--3to2 img {
+      object-fit: cover;
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0; }
+  .RV-Fan__Surface--left img {
+    object-position: left; }
+  .RV-Fan__Surface--center img {
+    object-position: center; }
+  .RV-Fan__Surface--top img {
+    object-position: top; }
+  .RV-Fan__Surface--bottom img {
+    object-position: bottom; }
+  .RV-Fan__Surface--center img {
+    object-position: center; }
 
 .RV-FullWidthContent__Container {
   width: 100%; }
 
 .RV-FullWidthContent__Item {
-  width: 100%; }
-  .RV-FullWidthContent__Item, .RV-FullWidthContent__Item * {
-    overflow: hidden;
-    word-break: break-all; }
+  width: 100%;
+  display: block;
+  overflow: hidden; }
   .RV-FullWidthContent__Item img {
     width: 100%;
     height: 100%;
-    object-fit: cover; }
+    object-fit: cover;
+    display: block; }
+  .RV-FullWidthContent__Item p {
+    overflow: hidden;
+    display: block;
+    text-overflow: ellipsis;
+    padding: 0;
+    margin: 0;
+    line-height: 1.21;
+    z-index: -20;
+    position: relative;
+    background-color: white;
+    height: 96.8%; }
+  .RV-FullWidthContent__Item--fade--fade:after {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0), white);
+    display: block;
+    content: ' ';
+    opacity: 0.8;
+    position: relative;
+    top: -25%;
+    width: 100%;
+    height: 25%;
+    z-index: -10; }
+  .RV-FullWidthContent__Item--ellipsis--ellipsis:after {
+    position: relative;
+    display: block;
+    bottom: 1.2em;
+    left: calc(100% - 3ch);
+    content: '...';
+    font-size: 1.2em;
+    min-width: 2em;
+    background-color: white;
+    padding: 0 2px; }
+  .RV-FullWidthContent__Item--square {
+    width: 100%;
+    padding-top: 100%;
+    position: relative; }
+    .RV-FullWidthContent__Item--square img,
+    .RV-FullWidthContent__Item--square div {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0; }
+  .RV-FullWidthContent__Item--circle {
+    width: 100%;
+    padding-top: 100%;
+    position: relative;
+    border-radius: 50%; }
+    .RV-FullWidthContent__Item--circle img,
+    .RV-FullWidthContent__Item--circle div {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0; }
+  .RV-FullWidthContent__Item--1to2 {
+    width: 100%;
+    padding-top: 200%;
+    position: relative; }
+    .RV-FullWidthContent__Item--1to2 img {
+      object-fit: cover;
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0; }
+  .RV-FullWidthContent__Item--2to1 {
+    width: 100%;
+    padding-top: 50%;
+    position: relative; }
+    .RV-FullWidthContent__Item--2to1 img {
+      object-fit: cover;
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0; }
+  .RV-FullWidthContent__Item--4to3 {
+    width: 100%;
+    padding-top: 75%;
+    position: relative; }
+    .RV-FullWidthContent__Item--4to3 img {
+      object-fit: cover;
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0; }
+  .RV-FullWidthContent__Item--16to9 {
+    width: 100%;
+    padding-top: 56.25%;
+    position: relative; }
+    .RV-FullWidthContent__Item--16to9 img {
+      object-fit: cover;
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0; }
+  .RV-FullWidthContent__Item--3to2 {
+    width: 100%;
+    padding-top: 66.66667%;
+    position: relative; }
+    .RV-FullWidthContent__Item--3to2 img {
+      object-fit: cover;
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0; }
   .RV-FullWidthContent__Item--left img {
     object-position: left; }
   .RV-FullWidthContent__Item--center img {
@@ -217,23 +606,47 @@
   .RV-FullWidthContent__Item--top img {
     object-position: top; }
   .RV-FullWidthContent__Item--bottom img {
-    object-position: botom; }
+    object-position: bottom; }
   .RV-FullWidthContent__Item--center img {
     object-position: center; }
 
+.RV-Sizes--half {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 50%;
+  width: 50%; }
+
+.RV-Sizes--third {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 33.33%;
+  width: 33.33%; }
+
+.RV-Sizes--quarter {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 25%;
+  width: 25%; }
+
+.RV-Sizes--fixedSize {
+  flex-grow: 0;
+  flex-shrink: 0; }
+
+.RV-Sizes--content {
+  flex-grow: 0;
+  flex-shrink: 0;
+  width: max-content;
+  flex-basis: max-content; }
+
 .RV-BoxShadow {
   position: relative;
-  float: left;
-  width: 40%;
-  margin: 2em 10px 4em;
-  background: #fff;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; }
+  float: left; }
   .RV-BoxShadow:before, .RV-BoxShadow:after {
     content: "";
     position: absolute;
     z-index: -2; }
   .RV-BoxShadow--simple {
-    box-shadow: 0 0 20px #6b5690; }
+    box-shadow: 0 0 10px #6b5690; }
   .RV-BoxShadow--raised:after {
     box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; }
   .RV-BoxShadow--liftedCorners:before, .RV-BoxShadow--liftedCorners:after {
@@ -249,25 +662,6 @@
     left: auto;
     transform: rotate(3deg); }
 
-.RV-ElementList__Container {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  border: none; }
-
-.RV-ElementList__Item {
-  margin: 0;
-  padding: 0;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  border: none; }
-
 .RV-Spacing__Outer--small {
   margin: 10px; }
 
@@ -342,24 +736,146 @@
   position: relative;
   top: 2.175em; }
 
-.RV-ImageGrid__Container {
-  list-style-type: none;
+.RV-ElementList {
+  display: flex;
+  height: 100%;
   margin: 0;
   padding: 0;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
-  border: none; }
+  border: none;
+  list-style-type: none; }
+  .RV-ElementList--breakPoint {
+    flex-wrap: wrap; }
+    .RV-ElementList--breakPoint * {
+      flex-basis: calc(500px * 999 - 100% * 999); }
+  .RV-ElementList--horizontal {
+    flex-direction: row; }
+  .RV-ElementList--vertical {
+    flex-direction: column; }
+  .RV-ElementList--auto {
+    flex-direction: row;
+    flex-wrap: wrap; }
+  .RV-ElementList__Item {
+    flex-basis: max-content;
+    flex-grow: 3;
+    flex-shrink: 3; }
 
-.RV-ImageGrid__Item {
+.RV-Menu--vertical .RV-Menu__List {
+  flex-direction: column;
+  width: 100%; }
+
+.RV-Menu--horizontal .RV-Menu__List {
+  flex-direction: row;
+  flex-wrap: wrap; }
+  .RV-Menu--horizontal .RV-Menu__List * {
+    flex-basis: calc(500px * 999 - 100% * 999); }
+
+.RV-Menu--spaced .RV-Menu__List {
+  gap: 25px; }
+
+.RV-Menu__List {
+  display: flex;
+  height: 100%;
+  display: flex;
+  height: 100%;
   margin: 0;
   padding: 0;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
-  border: none; }
+  border: none;
+  list-style-type: none;
+  padding: 10px; }
+  .RV-Menu__List--breakPoint {
+    flex-wrap: wrap; }
+    .RV-Menu__List--breakPoint * {
+      flex-basis: calc(500px * 999 - 100% * 999); }
+  .RV-Menu__List--horizontal {
+    flex-direction: row; }
+  .RV-Menu__List--vertical {
+    flex-direction: column; }
+  .RV-Menu__List--auto {
+    flex-direction: row;
+    flex-wrap: wrap; }
+  .RV-Menu__List__Item {
+    flex-basis: max-content;
+    flex-grow: 3;
+    flex-shrink: 3; }
+
+.RV-Menu__Item {
+  flex-basis: max-content;
+  flex-grow: 3;
+  flex-shrink: 3;
+  display: grid; }
+  .RV-Menu__Item--top {
+    display: grid;
+    align-content: start; }
+  .RV-Menu__Item--bottom {
+    display: grid;
+    align-content: end; }
+  .RV-Menu__Item--left {
+    display: grid;
+    justify-content: start; }
+  .RV-Menu__Item--right {
+    display: grid;
+    justify-content: end; }
+  .RV-Menu__Item--horizontalCenter {
+    display: grid;
+    justify-content: center; }
+  .RV-Menu__Item--verticalCenter {
+    display: grid;
+    align-items: center; }
+  .RV-Menu__Item--center {
+    display: grid;
+    justify-content: center;
+    display: grid;
+    align-items: center; }
+  .RV-Menu__Item--narrower {
+    flex-grow: 1;
+    flex-shrink: 5; }
+  .RV-Menu__Item--narrow {
+    flex-grow: 2;
+    flex-shrink: 4; }
+  .RV-Menu__Item--wide {
+    flex-grow: 4;
+    flex-shrink: 2; }
+  .RV-Menu__Item--wider {
+    flex-grow: 5;
+    flex-shrink: 1; }
+  .RV-Menu__Item--fixedSize {
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: min-content;
+    flex-basis: 100px; }
+  .RV-Menu__Item--half {
+    flex-grow: 0;
+    flex-shrink: 0;
+    flex-basis: 50%;
+    width: 50%; }
+  .RV-Menu__Item--third {
+    flex-grow: 0;
+    flex-shrink: 0;
+    flex-basis: 33.33%;
+    width: 33.33%; }
+  .RV-Menu__Item--quarter {
+    flex-grow: 0;
+    flex-shrink: 0;
+    flex-basis: 25%;
+    width: 25%; }
+  .RV-Menu__Item--content {
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: max-content;
+    flex-basis: max-content; }
+  .RV-Menu__Item .RV-Link {
+    padding: 10px;
+    background-color: beige;
+    display: block;
+    white-space: nowrap; }
 
 .RV-ImageGrid__Container {
   display: grid;
@@ -367,27 +883,27 @@
   grid-template-rows: repeat(auto-fill, minmax(300px, 1fr));
   grid-auto-rows: minmax(300px, 1fr); }
 
-.RV-ImageGrid__Item__Container {
+.RV-ImageGrid__Item {
   display: grid; }
-  .RV-ImageGrid__Item__Container--top {
+  .RV-ImageGrid__Item--top {
     display: grid;
     align-content: start; }
-  .RV-ImageGrid__Item__Container--bottom {
+  .RV-ImageGrid__Item--bottom {
     display: grid;
     align-content: end; }
-  .RV-ImageGrid__Item__Container--left {
+  .RV-ImageGrid__Item--left {
     display: grid;
     justify-content: start; }
-  .RV-ImageGrid__Item__Container--right {
+  .RV-ImageGrid__Item--right {
     display: grid;
     justify-content: end; }
-  .RV-ImageGrid__Item__Container--horizontalCenter {
+  .RV-ImageGrid__Item--horizontalCenter {
     display: grid;
     justify-content: center; }
-  .RV-ImageGrid__Item__Container--verticalCenter {
+  .RV-ImageGrid__Item--verticalCenter {
     display: grid;
     align-items: center; }
-  .RV-ImageGrid__Item__Container--center {
+  .RV-ImageGrid__Item--center {
     display: grid;
     justify-content: center;
     display: grid;
@@ -398,29 +914,138 @@
   .RV-ImageGrid__Container__Container {
     gap: 25px; }
 
-.RV-ImageGrid__Item, .RV-ImageGrid__Item * {
-  overflow: hidden;
-  word-break: break-all; }
-
-.RV-ImageGrid__Item img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover; }
-
-.RV-ImageGrid__Item--left img {
-  object-position: left; }
-
-.RV-ImageGrid__Item--center img {
-  object-position: center; }
-
-.RV-ImageGrid__Item--top img {
-  object-position: top; }
-
-.RV-ImageGrid__Item--bottom img {
-  object-position: botom; }
-
-.RV-ImageGrid__Item--center img {
-  object-position: center; }
-
-.RV-ImageGrid__Item img {
-  object-position: center; }
+.RV-ImageGrid__Item {
+  display: block;
+  overflow: hidden; }
+  .RV-ImageGrid__Item img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block; }
+  .RV-ImageGrid__Item p {
+    overflow: hidden;
+    display: block;
+    text-overflow: ellipsis;
+    padding: 0;
+    margin: 0;
+    line-height: 1.21;
+    z-index: -20;
+    position: relative;
+    background-color: white;
+    height: 96.8%; }
+  .RV-ImageGrid__Item--fade--fade:after {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0), white);
+    display: block;
+    content: ' ';
+    opacity: 0.8;
+    position: relative;
+    top: -25%;
+    width: 100%;
+    height: 25%;
+    z-index: -10; }
+  .RV-ImageGrid__Item--ellipsis--ellipsis:after {
+    position: relative;
+    display: block;
+    bottom: 1.2em;
+    left: calc(100% - 3ch);
+    content: '...';
+    font-size: 1.2em;
+    min-width: 2em;
+    background-color: white;
+    padding: 0 2px; }
+  .RV-ImageGrid__Item--square {
+    width: 100%;
+    padding-top: 100%;
+    position: relative; }
+    .RV-ImageGrid__Item--square img,
+    .RV-ImageGrid__Item--square div {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0; }
+  .RV-ImageGrid__Item--circle {
+    width: 100%;
+    padding-top: 100%;
+    position: relative;
+    border-radius: 50%; }
+    .RV-ImageGrid__Item--circle img,
+    .RV-ImageGrid__Item--circle div {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0; }
+  .RV-ImageGrid__Item--1to2 {
+    width: 100%;
+    padding-top: 200%;
+    position: relative; }
+    .RV-ImageGrid__Item--1to2 img {
+      object-fit: cover;
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0; }
+  .RV-ImageGrid__Item--2to1 {
+    width: 100%;
+    padding-top: 50%;
+    position: relative; }
+    .RV-ImageGrid__Item--2to1 img {
+      object-fit: cover;
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0; }
+  .RV-ImageGrid__Item--4to3 {
+    width: 100%;
+    padding-top: 75%;
+    position: relative; }
+    .RV-ImageGrid__Item--4to3 img {
+      object-fit: cover;
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0; }
+  .RV-ImageGrid__Item--16to9 {
+    width: 100%;
+    padding-top: 56.25%;
+    position: relative; }
+    .RV-ImageGrid__Item--16to9 img {
+      object-fit: cover;
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0; }
+  .RV-ImageGrid__Item--3to2 {
+    width: 100%;
+    padding-top: 66.66667%;
+    position: relative; }
+    .RV-ImageGrid__Item--3to2 img {
+      object-fit: cover;
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0; }
+  .RV-ImageGrid__Item--left img {
+    object-position: left; }
+  .RV-ImageGrid__Item--center img {
+    object-position: center; }
+  .RV-ImageGrid__Item--top img {
+    object-position: top; }
+  .RV-ImageGrid__Item--bottom img {
+    object-position: bottom; }
+  .RV-ImageGrid__Item--center img {
+    object-position: center; }
+  .RV-ImageGrid__Item img {
+    object-position: center; }
+  .RV-ImageGrid__Item--square {
+    height: 0;
+    width: 100%;
+    padding-bottom: 100%; }
+    .RV-ImageGrid__Item--square * {
+      height: initial; }